子楹。 发表于 2025-10-29 20:11

【学习代码】那年冬天 TO/马黑黑老师

本帖最后由 子楹。 于 2025-10-29 20:23 编辑 <br /><br /><style>
        #dbox {
        margin: 130px 0 30px calc(50% - 931px);
        width: 1600px;
        height: 1000px;
        background: url('https://image.hnol.net/c/2025-10/29/19/202510291938312491-5027609.jpg') no-repeat center/cover;
        border-radius: 6px;
        box-shadow: 3px 3px 8px gray;
        position: relative;
        overflow: hidden;
}
        #vid {
                position: absolute;
                width: 110%;
                height: 110%;
                object-fit: cover;
                left:-6%;
                top:-4%;
                mix-blend-mode:screen;
                pointer-events: none;
                opacity: 0.79;
                -webkit-mask: linear-gradient(to bottom,transparent,red,red);
}
        #msvg { position: absolute; right: 400px; bottom:350px; }
        #cpath { cursor: pointer; filter: drop-shadow(0 0 4px #000); transform-origin: 50%; animation: rot 6s linear infinite var(--state), chgcolor 12s linear infinite alternate var(--state); }
        @keyframes rot { to { transform: rotate(360deg); stroke-dashoffset: -160; } }
        @keyframes chgcolor { to { fill: rgba(100,55,30,.1); } }
</style>

<div id="dbox">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26145721" autoplay loop></audio>
       
        <svg id="msvg" width="200" height="200">
                <defs>
                        <g id="cpath"fill="rgba(210,105,30,.15)" stroke="rgba(255,255,255,.8)" stroke-width="4" stroke-dasharray="4">
                                <path d='M100 120 C10 -30,190 -30,100 120'/>
                        </g>
                </defs>
        </svg>
</div>

<script>
        mState = () => {
                dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                aud.paused ? (msvg.pauseAnimations(), vid.pause()) : (msvg.unpauseAnimations(), vid.play());
        }
        mkLeaves = (total) => {
                let str = '';
                Array(total).fill().forEach((_,idx) => {
                        str += `<use href="#cpath" transform="rotate(${360 / total * idx} 100 100)"/>`;
                });
                return str;
        };
        msvg.innerHTML += mkLeaves(5);
        aud.onplaying = aud.onpause = () => mState();
        msvg.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

子楹。 发表于 2025-10-29 20:13

本帖最后由 子楹。 于 2025-10-29 20:17 编辑

@马黑黑 老师请指教，我套用的，只会换图片和动画特效和移动播放器位置，，别的还看不懂。之前套用之前问你的那个代码，效果画面是暗色的。

子楹。 发表于 2025-10-29 20:15

发这里不知道对不对，，，{:4_173:}

红影 发表于 2025-10-29 20:23

子楹。 发表于 2025-10-29 20:15
发这里不知道对不对，，，

是对的，音画版发音画作品，太对了{:4_173:}

子楹。 发表于 2025-10-29 20:25

红影 发表于 2025-10-29 20:23
是对的，音画版发音画作品，太对了
问好影，代码太难的，我专研了一下午，还是看不懂，马马虎虎弄了一个

红影 发表于 2025-10-29 20:25

这制作好漂亮。子楹真好，用黑黑的代码，做好的帖子也是送黑黑的，很懂感恩。
子楹朋友的第一个帖子，亮起来，期待你更多好作品{:4_199:}

子楹。 发表于 2025-10-29 20:27

本帖最后由 子楹。 于 2025-10-29 20:29 编辑

红影 发表于 2025-10-29 20:25
这制作好漂亮。子楹真好，用黑黑的代码，做好的帖子也是送黑黑的，很懂感恩。
子楹朋友的第一个帖子，亮起 ...
是啊。我还担心看不见图呢，咱们论坛上传图片文件很小，我借用别的论坛上传的。承蒙黑师不嫌弃，，耐心回复

漫云儿 发表于 2025-10-29 20:57

漂亮！好看！

樵歌 发表于 2025-10-29 21:32

非常欣赏子楹美贴！子楹第一次发贴就会创作出如此漂亮的帖子，恭喜您！

樵歌 发表于 2025-10-29 21:35

我套用了一些@马黑黑 大师的代码，写字、唱歌，都是抄的二传手@小辣椒 和@红影 的学习改良，到现在都不会弄，你一来就会，天才吖{:4_178:}

马黑黑 发表于 2025-10-29 21:41

子楹。 发表于 2025-10-29 20:13
@马黑黑 老师请指教，我套用的，只会换图片和动画特效和移动播放器位置，，别的还看不懂。之前套用之前问你 ...

从不闻到知晓，从不知到熟练，一切因缘、因你探索精神

红影 发表于 2025-10-29 22:37

子楹。 发表于 2025-10-29 20:25
问好影，代码太难的，我专研了一下午，还是看不懂，马马虎虎弄了一个

做着做着就逐渐入门了啊，大家都是从不会开始的呢。子楹的这个已经很漂亮了呢{:4_199:}

红影 发表于 2025-10-29 22:39

子楹。 发表于 2025-10-29 20:27
是啊。我还担心看不见图呢，咱们论坛上传图片文件很小，我借用别的论坛上传的。承蒙黑师不嫌弃，，耐心回 ...

子楹可以将图片上传到图床，可以传得比较大了。比如
https://www.imgurl.org/vip/manage/upload

https://imgchr.com/

朵拉 发表于 2025-10-29 23:05

漂亮的说，子楹老师 棒棒哒{:4_204:}

梦江南 发表于 2025-10-30 12:04

画面好漂亮，歌曲好听。出手一鸣惊人了！{:4_187:}

子楹。 发表于 2025-10-30 12:11

梦江南 发表于 2025-10-30 12:04
画面好漂亮，歌曲好听。出手一鸣惊人了！

还需努力。。

梦江南 发表于 2025-10-30 12:15

子楹。 发表于 2025-10-30 12:11
还需努力。。

加油！

子楹。 发表于 2025-10-30 15:20

梦江南 发表于 2025-10-30 12:15
加油！

好的呀

梦江南 发表于 2025-10-30 15:22

子楹。 发表于 2025-10-30 15:20
好的呀

你一定行的，看好你哦！

子楹。 发表于 2025-10-30 15:23

梦江南 发表于 2025-10-30 15:22
你一定行的，看好你哦！

也就这样了，太难了，实在看不懂
页: [1] 2
查看完整版本: 【学习代码】那年冬天 TO/马黑黑老师