千羽 发表于 2023-7-2 20:14

【套用黑黑老师《虫鸣》代码】

本帖最后由 千羽 于 2023-7-2 20:59 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #eee url('https://pic.imgdb.cn/item/64a168921ddac507cc237808.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; --state: paused; }
#mplayer { position: absolute;left: 60%; bottom: 4%; font: bold 60px/60px sans-serif; cursor: pointer; opacity: .7; animation: rot 6s infinite linear var(--state); }
.pts { position: absolute;display: block;top: 0;left: 0;z-index: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <canvas class="pts"></canvas>
      <div id="mplayer">&#127811;</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1926943356.mp3" loop autoplay></audio>

<script>
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/particles2.2.2.min.js';
      document.head.appendChild(script);

      window.onload = () => {
                let colors = Array.from({length:20}, (v) => '#' + Math.random().toString(16).substr(-6));
                let particles = Particles.init({
                        selector: '.pts',
                        maxParticles: 120,
                        sizeVariations: 4,
                        color: colors
                });
                let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), particles.pauseAnimation()) : (papa.style.setProperty('--state','running'), particles.resumeAnimation());
                aud.addEventListener('play', mState, false);
                aud.addEventListener('pause', mState, false);
                mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      };
})();
</script>





千羽 发表于 2023-7-2 20:18

俺做不好。只能换图，换歌{:4_173:}

千羽 发表于 2023-7-2 20:18

谢谢黑黑老师分享代码{:4_187:}{:4_180:}

红影 发表于 2023-7-2 20:24

这图标按钮在羽儿的图图里特别漂亮，这个太美了{:4_199:}

醉美水芙蓉 发表于 2023-7-2 20:24

千羽 发表于 2023-7-2 20:27

红影 发表于 2023-7-2 20:24
这图标按钮在羽儿的图图里特别漂亮，这个太美了

谢谢影儿鼓励啊，我只能换图换歌，这样就很快的{:4_173:}

千羽 发表于 2023-7-2 20:28

醉美水芙蓉 发表于 2023-7-2 20:24
千羽图图就是漂亮！

问好芙蓉，谢谢了哦{:4_187:}

马黑黑 发表于 2023-7-2 20:28

千羽 发表于 2023-7-2 20:18
俺做不好。只能换图，换歌

这个就酱了，可以了

千羽 发表于 2023-7-2 20:29

本帖最后由 千羽 于 2023-7-2 20:41 编辑

马黑黑 发表于 2023-7-2 20:28
这个就酱了，可以了
哈哈，黑黑老师说可以了，好高兴啊{:4_187:}

红影 发表于 2023-7-2 21:21

千羽 发表于 2023-7-2 20:27
谢谢影儿鼓励啊，我只能换图换歌，这样就很快的

羽儿的图图漂亮，使得这些效果更美了{:4_187:}

千羽 发表于 2023-7-2 21:26

红影 发表于 2023-7-2 21:21
羽儿的图图漂亮，使得这些效果更美了

这是以前做的图，缩小后就放上了……{:4_173:}

焱鑫磊 发表于 2023-7-2 21:51

欣赏千羽佳作！{:4_187:}

红影 发表于 2023-7-2 21:58

千羽 发表于 2023-7-2 21:26
这是以前做的图，缩小后就放上了……

非常漂亮{:4_199:}

马黑黑 发表于 2023-7-2 22:16

千羽 发表于 2023-7-2 20:29
哈哈，黑黑老师说可以了，好高兴啊

高兴就整两盅{:4_191:}

南无月 发表于 2023-7-3 10:17

{:4_187:}旷野之中，美人儿踽踽独行，此时有漫天粒子飞舞相伴，巧妙的填补空旷之感，美感十足，千羽出品必是精品，大赞！

小文 发表于 2023-7-3 19:25

好漂亮

千羽 发表于 2023-7-3 19:54

焱鑫磊 发表于 2023-7-2 21:51
欣赏千羽佳作！

       
问好焱鑫磊，谢谢了{:4_187:}

千羽 发表于 2023-7-3 19:55

红影 发表于 2023-7-2 21:58
非常漂亮

谢谢影儿{:4_179:}

千羽 发表于 2023-7-3 19:56

马黑黑 发表于 2023-7-2 22:16
高兴就整两盅

哈哈，不敢{:4_173:}

千羽 发表于 2023-7-3 19:58

南无月 发表于 2023-7-3 10:17
旷野之中，美人儿踽踽独行，此时有漫天粒子飞舞相伴，巧妙的填补空旷之感，美感十足，千羽出品必 ...

谢谢月儿大赞哈，俺这个太简单了，要向学霸学习{:4_181:}
页: [1] 2 3
查看完整版本: 【套用黑黑老师《虫鸣》代码】