子楹。 发表于 2025-10-31 19:23

【学习黑师代码】此生如梦愿细数流年 赠/樵歌


<style>
        #dbox {
        margin: 130px 0 30px calc(50% - 931px);
        width: 1600px;
        height: 950px;
        background: url('https://image.hnol.net/c/2025-10/31/19/202510311915522971-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: 410px; bottom:550px; }
        #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=2135442273" 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-31 19:25

感谢@樵歌 老大赠章章，谢谢遥祝冬安{:6_220:}

子楹。 发表于 2025-10-31 20:05

这个播放器要是缩小一些就好了

红影 发表于 2025-10-31 22:52

制作很漂亮呢，先于樵歌来欣赏了。我只欣赏帖子，精华留给樵歌来加。{:4_173:}
@樵歌 收礼开心{:4_187:}

樵歌 发表于 2025-11-3 07:07

谢谢子楹的礼物！{:4_190:}这两天都弄那AI去了，都没把所有帖子过一下，也没看提醒，真是失礼1{:4_176:}{:4_201:}

樵歌 发表于 2025-11-3 07:09

子楹。 发表于 2025-10-31 19:25
感谢@樵歌 老大赠章章，谢谢遥祝冬安

你太客气啦！{:4_204:}朋友们来这是我们的礼数。这送了我两天了，我才看到，幸好今晨@红影 提醒 。

樵歌 发表于 2025-11-3 07:12

哇塞，一个睡美人儿睡冰天雪地上，她肯定是个心灵特别纯洁的人，洁白晶莹如她的美丽。真是太美啦！

樵歌 发表于 2025-11-3 07:13

这音乐也和天地之间的飘飘飞契合得极好！完美！

澜天 发表于 2025-11-3 13:41

音画俱佳
感人至深
{:4_187:}
页: [1]
查看完整版本: 【学习黑师代码】此生如梦愿细数流年 赠/樵歌