福宝 发表于 2024-6-25 00:06

菊次郎的夏天（纯钢琴）

本帖最后由 福宝 于 2024-6-25 00:55 编辑 <br /><br /><style>
#tz { left: 50%; transform: translateX(calc(-50% - 90px)); width: 1350px; height: 1500px; overflow: hidden; background: lightblue url('https://gd-hbimg.huaban.com/bcc4492fc75cdf3aca7808a9815b484e423bf4a1c312b-zH75m5') 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:100px;
height:100px;
border-radius:50%;
background:transparent;
offset-path: path('M600 800 Q-400 450,860 -20');
offset-distance: 0;
filter: drop-shadow(0px 0px 0px var(--shadow));
animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state);
opacity: 0.95; }

li-zi:hover {
filter: hue-rotate(0deg)
drop-shadow(0px 0px 0px snow); }

#player {
position: absolute;
right: 200px;
bottom: 200px; width: 160px;
height: 160px; cursor: pointer;
transition: .5s;
animation: rot 8s linear infinite var(--state); }

#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=541326593" autoplay loop></audio>
    <img id="player" alt="" title="播放" src="https://gd-hbimg.huaban.com/d8df8b512b02a985d9c358d5370bced8abd7ee7e2d576-HHUGiz" />
</div>

<script>
//粒子
new Array(total =5).fill(0).map((i,k) => {
    i = document.createElement('li-zi');
    i.style.cssText += `
      left: ${600 / total * k + 20}px;      
      background: url('https://gd-hbimg.huaban.com/d8df8b512b02a985d9c358d5370bced8abd7ee7e2d576-HHUGiz') no-repeat center/cover;
      animation-delay: -${Math.random() * 20}s;      
    `;
    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: olive;',
});
        mydiv.onmousemove = function(e) {
                clearTimeout(timer);
                timer = setTimeout(function() {
                        if(e.target.id === 'player') return;
                        let x = e.offsetX | e.layerX, y = e.offsetY | e.layerY, sw = player.offsetWidth;
                        if(x < 0) x = 0;
                        if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;
                        if(y < 0) y = 0;
                        if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;
                        player.style.cssText += `left: ${x}px; top: ${y}px;`;
                }, 400);
        }


</script>

悦儿 发表于 2024-6-25 11:57

这个代码我也喜欢

墨羽 发表于 2024-6-25 12:26

进来欣赏下，泡泡很好看，背景也漂亮！{:9001:}

福宝 发表于 2024-6-25 16:10

墨羽 发表于 2024-6-25 12:26
进来欣赏下，泡泡很好看，背景也漂亮！

多谢老大欣赏支持

蜻蜓 发表于 2024-6-25 16:13

蓝色我喜欢{:10_402:}
页: [1]
查看完整版本: 菊次郎的夏天（纯钢琴）