|
|

楼主 |
发表于 2023-3-13 07:43
|
显示全部楼层
帖子代码
- <style>
- #papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #aaa url('https://638183.freep.cn/638183/t23/1/dzqb.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
- #mydiv { position: absolute; bottom: 60px; left: 60px; width: 160px; height: 80px; color: var(--border); text-shadow: 1px 1px 1px #000; background: #ddb2af; backdrop-filter: blur(20px); border: 6px dotted var(--border); border-radius: 80px 80px 0 0; opacity: .72; display: grid; place-items: end center; cursor: pointer; transform: perspective(2000px) rotateY(-33deg); --deg: 0; --border: hsla(20,80%,40%,.6); }
- #mydiv::before { position: absolute; content: ''; width: 8px; height: 78px; background: var(--border); border-radius: 8px; transform-origin: center bottom; transform: rotate(var(--deg)); transition: transform .5s; }
- </style>
- <div id="papa">
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1885233480" autoplay loop></audio>
- </div>
- <script>
- let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
- mydiv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
- aud.addEventListener('timeupdate', () => {
- let deg = 80 - Math.floor(Math.random()*160);
- mydiv.style.setProperty('--deg',deg + 'deg');
- mydiv.innerText = toMin(aud.currentTime) + '/' + toMin(aud.duration);
- });
- </script>
复制代码
|
|