小提琴：星辰大海
本帖最后由 福宝 于 2024-6-26 13:06 编辑 <br /><br /><style>#tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 90px)); width: 1500px; height: 1200px; overflow: hidden; background: lightblue url('https://gd-hbimg.huaban.com/ece0a817a4809efd8eb7ecdf6064f2a8cdba231520197-0fwA7f_fw1200') no-repeat center/cover; border: 10px inset tan; z-index: 1; position: relative; --distance: 1280px; }
li-zi { position: absolute; top: -100px; border-radius: 50%; animation: fly 20s cubic-bezier(0.09, -0.12, 0.92, 0.47) infinite var(--state);font-size:45px;color: snow; filter: hue-rotate(180deg) drop-shadow(0 0 10px -snow); }
li-zi:hover{filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
#player { position: absolute; left: calc(50% - 60px); top: 30px; width: 120px; height: 120px; cursor: pointer; filter: hue-rotate(60deg); transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(0); }
@keyframes fly { to { transform: rotate(-90deg) translateY(var(--distance)); } }
@keyframes rot { to { transform: rotateY(-1turn); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1818581422" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://gd-hbimg.huaban.com/746c0911737ed6bf2ecb9ede259541dfc3aa781c5288c-X65jl6" />
</div>
<script>
new Array(total = 10).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.innerText = ['♬','♪','♫'];
i.style.cssText += `
left: ${Math.floor(20 * Math.random()) - 10}%;
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: 'top: 160px; left: 50%; transform: translate(-50%); --color: snow; --fsBg: rgba(224,144,113,.7);',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
</script> 本帖最后由 福宝 于 2024-6-26 12:43 编辑
请在极速模式下欣赏 帖子越来越漂亮，赞 纯净的天空飘动的乐符！ 欣赏了{:10_403:}
页:
[1]