|
|

楼主 |
发表于 2023-4-17 11:55
|
显示全部楼层
帖子代码
- <style>
- #papa {
- margin: -80px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/webp1/night.webp') center/cover no-repeat;
- overflow: hidden;
- position: relative;
- --state: paused;
- }
- #mplayer {
- position: absolute;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- box-shadow: 10px 8px snow;
- cursor: pointer;
- animation: rot 1s infinite linear alternate var(--state);
- }
- #mplayer::before {
- position: absolute;
- content: '';
- top: 10px;
- left: 10px;
- width: 100%;
- height: 100%;
- }
- #wrap {
- position: absolute;
- width: 100%;
- height: 50%;
- transform: rotate(-30deg);
- }
- .line {
- --du: 10s; --delay: 0s;
- position: absolute;
- width: 1px;
- height: 100px;
- top: -200px;
- opacity: .9;
- background: linear-gradient(to top, snow, transparent);
- animation: flow var(--du) var(--delay) infinite linear;
- }
- @keyframes flow { to { top: 100%; opacity: 0; } }
- @keyframes rot { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
- </style>
- <div id="papa">
- <div id="wrap"></div>
- <div id="mplayer"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=421110137" autoplay loop></audio>
- </div>
- <script>
- let total = 40, ww = wrap.offsetWidth;
- Array.from({length:total}).forEach((item,key) => {
- let sp = document.createElement('span');
- sp.className = 'line';
- sp.style.cssText += `
- --delay: ${Math.random() * 4 - 4}s;
- --du: ${Math.random() * 8 + 4}s;
- left: ${Math.random() * ww}px;
- height: ${Math.random() * 50 + 50}px;
- `;
- wrap.appendChild(sp);
- });
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|