|
|

楼主 |
发表于 2023-2-11 09:01
|
显示全部楼层
代码
- <style>
- #mplayer {
- --state: paused;
- position: relative;
- margin: 80px auto;
- width: 80px;
- height: 80px;
- background: darkgreen;
- box-shadow: inset 0 0 40px hsla(0,0%,100%,.75), -10px -10px 30px hsla(0,0%,0%,.75);
- border-radius: 50%;
- display: grid;
- place-items: center;
- }
- #mplayer:hover {
- cursor: pointer;
- box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), -10px -10px 40px hsla(0,0%,0%,.75);
- }
- .wave {
- --delay: 0s;
- position: absolute;
- width: 80%;
- height: 80%;
- border: 3px solid snow;
- border-radius: 50%;
- clip-path: inset(25% 0 25% 25%);
- animation: fade .6s var(--delay) infinite var(--state);
- }
- .wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
- .wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
- .wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }
- @keyframes fade {
- from { opacity: .9; }
- to { opacity: 0.2; }
- }
- </style>
- <div id="mplayer">
- <span class="wave"></span>
- <span class="wave"></span>
- <span class="wave"></span>
- <span class="wave"></span>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993911654.mp3" loop autoplay></audio>
- <script>
- (function() {
- let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', () => mState());
- aud.addEventListener('pause', () => mState());
- mplayer.addEventListener('click', () => {
- aud.paused ? aud.play() : aud.pause();
- });
- })();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|