福宝 发表于 2024-6-25 17:55

时间的迷宫

本帖最后由 福宝 于 2024-6-25 18:10 编辑 <br /><br /><style>
#tz { left: 50%;top:150px; transform: translateX(calc(-50% - 81px)); width: 1700px; height: 1200px; overflow: hidden; background: lightblue url('https://gd-hbimg.huaban.com/bf7408aeaff73e29ea8f9ac270b535fdfe9beefe237312-QaGlv7_fw1200') no-repeat topcenter/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: 35px; height: 35px; 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,0.36,0,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }

#player { position: absolute; right: 480px; bottom: 420px;mix-blend-mode: screen; width: 200px; height: 200px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@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=1310316559" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://gd-hbimg.huaban.com/f1214aff1a259ef5dd034613167ea2ec3128a07712d9ca-leZYHe" />
</div>

<script>
new Array(total = 10).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/d11a2c1c641acd2e314329726d63596b23cbf1f1e75-OQqHJe') no-repeat center/cover;
                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: transparent;',
});
</script>

蜻蜓 发表于 2024-6-25 21:05

流水声听着舒服{:10_402:}

墨羽 发表于 2024-6-26 09:55

我进来凉快凉快，哪个山洞里的流水呀，这又是哪个剧中的神仙姐姐，哈哈！{:9005:}

福宝 发表于 2024-6-26 11:24

墨羽 发表于 2024-6-26 09:55
我进来凉快凉快，哪个山洞里的流水呀，这又是哪个剧中的神仙姐姐，哈哈！ ...

大佬早

福宝 发表于 2024-6-26 11:25

蜻蜓 发表于 2024-6-25 21:05
流水声听着舒服

早上。

墨羽 发表于 2024-6-26 11:32

福宝 发表于 2024-6-26 11:24
大佬早

你现在也是大佬！{:9001:}

福宝 发表于 2024-6-26 12:56

墨羽 发表于 2024-6-26 11:32
你现在也是大佬！

{:9005:}先去考研
页: [1]
查看完整版本: 时间的迷宫