论坛 › 音乐沙龙 › 《梦行者》（学习黑黑《凤山舞曲》代码）

红影 发表于 2024-4-18 12:32

《梦行者》（学习黑黑《凤山舞曲》代码）

<style>
        #papa { margin: 20px 0 0 calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/661ff7450ea9cb14037bc2c8.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; position: relative;}
        #play { position: absolute; width: 420px; left: 621px; top: 153px;cursor: pointer; animation: rot 5s linear infinite var(--state); }
      #play1 { position: absolute; left: 1030px; top: 30px; width: 180px; opacity: .7;animation: rot1 4s linear infinite var(--state); }
      #play2 { position: absolute; left: 300px; top: 510px; width: 160px;animation: rot2 6s linear infinite var(--state); }
      #play3 { position: absolute; left: 0px; top: 260px; width: 200px;animation: rot3 4s linear infinite var(--state); }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes rot1 { to { transform: rotate(-360deg); } }
      @keyframes rot2 { to { transform: rotate(360deg); } }
        @keyframes rot3 { to { transform: rotate(-360deg); } }
      #vid { position: absolute; right: 0; width: 100%; height: 110%; object-fit: cover; mix-blend-mode: screen; top: -10%; opacity: .75;pointer-events: none; }</style>
<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927381537" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c82236cc40_10s_big.mp4" muted loop></video>
        <img id="play1" src="https://pic.imgdb.cn/item/661ff78e0ea9cb14037e0df9.png" alt="" />
        <img id="play" src="https://pic.imgdb.cn/item/661ff7740ea9cb14037d4939.png" alt="" />
      <img id="play2" src="https://pic.imgdb.cn/item/661ff7740ea9cb14037d4939.png" alt="" />
        <img id="play3" src="https://pic.imgdb.cn/item/661ff78e0ea9cb14037e0df9.png" alt="" />
</div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);

var lz = {papa: '#papa', total: 60, maxsize: 30, move: false};

var mState = () => {
        lz.move = !aud.paused;
        papa.style.setProperty('--state', ['paused','running'][+lz.move]);
       lz.move ? vid.play() : vid.pause();
}


play.onclick = () => {
        aud.paused ? aud.play() : aud.pause();
        mState();
}

setTimeout(mState, 200);
</script>

红影 发表于 2024-4-18 12:34

非常喜欢黑黑的多叶草自己去调色制作的效果。在帖子里一下子加了3个@马黑黑 {:4_187:}

红影 发表于 2024-4-18 12:37

开始时弄错了，想用按钮的:nth-of-type(1)方式想多加几个，没成功。

想起黑黑在代码讲解中说，这个粒子封装可以实现很多个联动。然后改成单个图片的转动，果然可以的呢，完全可以响应音乐的暂停和播放。这个封装太好了，这样想加多少个都行了呢{:4_205:}

红影 发表于 2024-4-18 12:38

选取的底图一般，就是看它上面也有圆点，比较适合粒子封装效果，就选了这个背景{:4_173:}

红影 发表于 2024-4-18 12:44

那个大的按钮背景上有个圆环，感觉像按钮上有个转动圆环似的，这个没想到呢{:4_173:}

马黑黑 发表于 2024-4-18 13:11

这个设计很美妙

小文 发表于 2024-4-18 13:18

好漂亮哇！大赞！{:4_187:}{:4_187:}{:4_204:}{:4_204:}{:4_191:}

红影 发表于 2024-4-18 13:35

马黑黑 发表于 2024-4-18 13:11
这个设计很美妙

我在最左边又加一个多叶草，这个可以看着像背景上曲线上有划线在走了{:4_173:}

红影 发表于 2024-4-18 13:35

小文 发表于 2024-4-18 13:18
好漂亮哇！大赞！

谢谢小文，只是加了几个多叶草，好玩的{:4_173:}

马黑黑 发表于 2024-4-18 14:05

红影 发表于 2024-4-18 13:35
我在最左边又加一个多叶草，这个可以看着像背景上曲线上有划线在走了

很巧妙

起个网名好难 发表于 2024-4-18 16:46

玫瑰色的梦啊{:5_117:}

南无月 发表于 2024-4-18 17:37

红影 发表于 2024-4-18 12:34
非常喜欢黑黑的多叶草自己去调色制作的效果。在帖子里一下子加了3个@马黑黑

影子真是代码第一人，这个创意真是太牛了。。{:4_199:}

南无月 发表于 2024-4-18 17:38

颜色梦幻之极，加上转动的粉红色的播放按纽，整个贴子浪漫温馨，太好看了。。{:4_199:}

南无月 发表于 2024-4-18 17:40

贴子内的小球碰撞效果更添灵动，
三个按纽位置，大小各有不同，错落有致，效果太好了。。
影子的构思，实现方法都是绝佳 ，为影子喝彩。。。{:4_199:}

樵歌 发表于 2024-4-18 19:51

离奇、玄幻、美妙的梦。师妹又创造了美境。太厉害了！

庶民 发表于 2024-4-18 20:42

很好看的，欣赏。

小辣椒 发表于 2024-4-18 21:03

亲爱的，这个漂亮，综合了几个效果一起上了{:4_199:}

小辣椒 发表于 2024-4-18 21:04

效果太美了{:4_178:}

红影 发表于 2024-4-18 21:47

马黑黑 发表于 2024-4-18 14:05
很巧妙

是这个透明的多叶草奇妙呢{:4_187:}

红影 发表于 2024-4-18 21:47

起个网名好难 发表于 2024-4-18 16:46
玫瑰色的梦啊

哈哈，这样的梦很旖旎{:4_173:}

查看完整版本: 《梦行者》（学习黑黑《凤山舞曲》代码）