|
|

楼主 |
发表于 2024-1-24 20:36
|
显示全部楼层
本帖最后由 马黑黑 于 2024-1-25 09:33 编辑
帖子代码
- <style>
- #papa {
- position: relative;
- margin: 0 0 0 calc(50% - 681px);
- width: 1199px;
- height: 622px;
- border-radius: 8px;
- background: radial-gradient(circle,transparent var(--radius), rgba(0,0,0,.5) calc(var(--radius) + 30%), rgba(0,0,0,.5) 0), url('https://638183.freep.cn/638183/t24/jpg/strike.jpg') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- cursor: pointer;
- z-index: 1;
- --radius: 0%;
- }
- </style>
- <div id="papa"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1418092894" autoplay loop></audio>
- <script>
- (function (){
- var step = 10, rad = 0, raf = null;
- var render = () => {
- rad += step;
- if(rad <= 0 || rad >= 100) step = -step;
- papa.style.setProperty('--radius', rad + '%');
- if(!aud.paused) raf = requestAnimationFrame(render);
- };
- var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('playing', mState, false);
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- })();
- </script>
复制代码
|
|