小广播

马黑黑

马黑黑

代码

1. <style>
   
2. #mplayer {
   
3.         --state: paused;
   
4.         position: relative;
   
5.         margin: 80px auto;
   
6.         width: 80px;
   
7.         height: 80px;
   
8.         background: darkgreen;
   
9.         box-shadow: inset 0 0 40px hsla(0,0%,100%,.75), -10px -10px 30px hsla(0,0%,0%,.75);
   
10.         border-radius: 50%;
    
11.         display: grid;
    
12.         place-items: center;
    
13. }
    
14. #mplayer:hover {
    
15.         cursor: pointer;
    
16.         box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), -10px -10px 40px hsla(0,0%,0%,.75);
    
17. }
    
18. .wave {
    
19.         --delay: 0s;
    
20.         position: absolute;
    
21.         width: 80%;
    
22.         height: 80%;
    
23.         border: 3px solid snow;
    
24.         border-radius: 50%;
    
25.         clip-path: inset(25% 0 25% 25%);
    
26.         animation: fade .6s var(--delay) infinite var(--state);
    
27. }
    
28. .wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
    
29. .wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
    
30. .wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }
    
31. 
    
32. @keyframes fade {
    
33.         from { opacity: .9; }
    
34.         to { opacity: 0.2; }
    
35. }
    
36. </style>
    
37. 
    
38. <div id="mplayer">
    
39.         <span class="wave"></span>
    
40.         <span class="wave"></span>
    
41.         <span class="wave"></span>
    
42.         <span class="wave"></span>
    
43. </div>
    
44. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993911654.mp3" loop autoplay></audio>
    
45. 
    
46. <script>
    
47. (function() {
    
48.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
49.         aud.addEventListener('play', () => mState());
    
50.         aud.addEventListener('pause', () => mState());
    
51.         mplayer.addEventListener('click', () => {
    
52.                 aud.paused ? aud.play() : aud.pause();
    
53.         });
    
54. })();
    
55. </script>

复制代码

小辣椒

原来，播放器在这里 手机看见是半面的广播信号，帖子上看见是整个都有广播信号，是我手机的原因？

红影

小喇叭开始广播了，有趣

马黑黑

小辣椒 发表于 2023-2-11 10:58
原来，播放器在这里 手机看见是半面的广播信号，帖子上看见是整个都有广播信号，是我手机的原因？

这里是半边波闪，帖子里才用两边波闪

马黑黑

红影 发表于 2023-2-11 11:08
小喇叭开始广播了，有趣

你是听这个节目长大的吧？有好多文稿是我采集的，不过我和老郑合不来，后来就不干了

马黑黑

醉美水芙蓉 发表于 2023-2-11 11:49
欣赏老师佳作！

庶民

净弄一些尖端的东东。

樵歌

真会弄

梦缘

精彩的小喇叭，感谢分享！

马黑黑

梦缘 发表于 2023-2-11 19:24
精彩的小喇叭，感谢分享！

感谢支持

红影

马黑黑 发表于 2023-2-11 11:17
你是听这个节目长大的吧？有好多文稿是我采集的，不过我和老郑合不来，后来就不干了

啊？黑黑连这个也弄过的啊，你咋啥都做过啊

马黑黑

红影 发表于 2023-2-11 22:30
啊？黑黑连这个也弄过的啊，你咋啥都做过啊

年纪大经历多

红影

马黑黑 发表于 2023-2-11 22:58
年纪大经历多

很多人一生只从事一样工作，你做过的事倒是很丰富多彩啊

马黑黑

红影 发表于 2023-2-11 23:24
很多人一生只从事一样工作，你做过的事倒是很丰富多彩啊

因为什么都不专业所以什么都干过

红影

马黑黑 发表于 2023-2-11 23:25
因为什么都不专业所以什么都干过

这话谦虚得过了，那些只干一样事的人是不懂变通，比如我这样的。分配到单位后都没换过单位

马黑黑

红影 发表于 2023-2-12 13:49
这话谦虚得过了，那些只干一样事的人是不懂变通，比如我这样的。分配到单位后都没换过单位

这叫执着，挺好

红影

马黑黑 发表于 2023-2-12 16:11
这叫执着，挺好

没本事没胆量换，这也能被叫好，真有你的

马黑黑

红影 发表于 2023-2-12 23:13
没本事没胆量换，这也能被叫好，真有你的

好就是好，这个，将来你会慢慢领悟