绿叶清舟 发表于 2024-7-1 19:51

向阳而生-致敬七一


<style>
#tz { left: 50%; transform: translateX(calc(-50% - 80px)); width: 1280px; height: 720px; overflow: hidden; background: #ffff33 url('https://p.upyun.com/demo/tmp/pAdGZsKu.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 26px; height: 26px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 #ffff33); }
#player { position: absolute; right: 1080px; bottom: 580px; width: 100px; height: 100px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); mix-blend-mode: difference;}
#player:hover { filter: brightness(1.2); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2154764409" autoplay loop></audio>
      <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" />
</div>

<script>
//粒子
new Array(total = 30).fill(0).map((i,k) => {
      i = document.createElement('li-zi');
      i.style.cssText += `
                left: ${600 / total * k + 20}px;
                background-image: linear-gradient(#ffff33, #${Math.random().toString(16).substring(2,8)});
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(2,8)};
      `;
      tz.prepend(i);
});
//联动函数
var mState = () => {
      tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
//全屏
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#tz',
      css: 'bottom: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: #ea4500;',
});
</script>

马黑黑 发表于 2024-7-1 20:09

播放器和粒子其实可以考虑使用五角星

绿叶清舟 发表于 2024-7-1 20:21

马黑黑 发表于 2024-7-1 20:09
播放器和粒子其实可以考虑使用五角星

在哪呢，好多贴都没看过了

小辣椒 发表于 2024-7-1 20:30

热烈庆祝中国共产党建党103周年！

小辣椒 发表于 2024-7-1 20:30

欣赏清舟精彩的制作{:4_199:}

醉美水芙蓉 发表于 2024-7-1 20:33

绿叶清舟 发表于 2024-7-1 20:39

小辣椒 发表于 2024-7-1 20:30
热烈庆祝中国共产党建党103周年！

一起祝贺，时间真快一转眼都七一了

绿叶清舟 发表于 2024-7-1 20:40

醉美水芙蓉 发表于 2024-7-1 20:33
清舟厉害！没有看过还做得这么漂亮！

不能学啊，最差生的了{:4_173:}

南无月 发表于 2024-7-1 20:51

超级漂亮，阳光积极。。。{:4_187:}

醉美水芙蓉 发表于 2024-7-1 20:51

南无月 发表于 2024-7-1 20:51

热烈庆祝中国共产党建党103周年！{:4_187:}

红影 发表于 2024-7-1 21:03

非常积极向上的帖子，充满了勃勃生机。欣赏清舟好帖。
祝福中国共产党103岁生日{:4_177:}

梦油 发表于 2024-7-1 21:11

千秋伟业垂青史 ，万户欢歌颂党恩。
   伟大的中国共产党万岁！
       清舟朋友节日快乐。

梦江南 发表于 2024-7-2 08:18

欣赏老师的精彩音画！太棒了！{:4_187:}
页: [1]
查看完整版本: 向阳而生-致敬七一