|
|

楼主 |
发表于 2024-6-26 07:50
|
显示全部楼层
本帖最后由 马黑黑 于 2024-6-26 12:20 编辑
帖子代码
- <style>
- #tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1280px; height: 624px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/ihan.jpg') 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); }
- #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: rotate(-1turn); } }
- </style>
- <div id="tz">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=75388" autoplay loop></audio>
- <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/small/hxxb.webp" />
- </div>
- <script>
- new Array(total = 80).fill(0).map((i,k) => {
- i = document.createElement('li-zi');
- i.innerHTML = ['🌸','💮','🌺'][k % 3];
- 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>
复制代码
|
|