宁静（to羽羽）

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -100px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: tan url('https://638183.freep.cn/638183/t23/webp/silence.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         z-index: 1;
    
12. }
    
13. #mplayer {
    
14.         --state: paused;
    
15.         position: absolute;
    
16.         bottom: 30px;
    
17.         width: 80px;
    
18.         height: 80px;
    
19.         background: darkgreen;
    
20.         box-shadow: inset 0 0 40px hsla(0,0%,100%,.75), 0 -10px 30px hsla(90,100%,70%,.75);
    
21.         border-radius: 50%;
    
22.         display: grid;
    
23.         place-items: center;
    
24. }
    
25. #mplayer:hover {
    
26.         cursor: pointer;
    
27.         box-shadow: inset 0 0 25px hsla(0,0%,100%,.75), 0 -10px 40px hsla(90,100%,50%,.75);
    
28. }
    
29. .wave {
    
30.         --delay: 0s;
    
31.         position: absolute;
    
32.         width: 80%;
    
33.         height: 80%;
    
34.         border: 3px solid snow;
    
35.         border-radius: 50%;
    
36.         clip-path: inset(20% 0 20% 0);
    
37.         animation: fade .6s var(--delay) infinite var(--state);
    
38. }
    
39. .wave:nth-of-type(2) { --delay: .3s; width: 60%; height: 60%; }
    
40. .wave:nth-of-type(3) { --delay: .5s; width: 40%; height: 40%; }
    
41. .wave:nth-of-type(4) { --delay: .6s; width: 20%; height: 20%; }
    
42. .wave:nth-of-type(5) { --delay: .6s; width: 0%; height: 0%; }
    
43. 
    
44. @keyframes fade {
    
45.         from { opacity: .9; }
    
46.         to { opacity: 0.2; }
    
47. }
    
48. </style>
    
49. 
    
50. <div id="papa">
    
51.         <div id="mplayer">
    
52.                 <span class="wave"></span>
    
53.                 <span class="wave"></span>
    
54.                 <span class="wave"></span>
    
55.                 <span class="wave"></span>
    
56.                 <span class="wave"></span>
    
57.         </div>
    
58. </div>
    
59. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993911654.mp3" loop autoplay></audio>
    
60. 
    
61. <script>
    
62. (function() {
    
63.         (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
    
64.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
65.         aud.addEventListener('play', () => mState());
    
66.         aud.addEventListener('pause', () => mState());
    
67.         mplayer.addEventListener('click', () => {
    
68.                 aud.paused ? aud.play() : aud.pause();
    
69.         });
    
70.         FS({pa: papa, set: 'color: snow; background: green; border: 2px solid snow;',});
    
71. })();
    
72. </script>

复制代码

小播的设计请参考小广播 ：小广播 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

小辣椒

千羽的沙发先留着

小辣椒

这个宁静的场景特别喜欢

小辣椒

新的播放器样式也是别具一格，漂亮

海笑

欣赏老师佳作！

小辣椒

黑黑大神高效，一咋眼就一个新产品出来了

小辣椒

看起来我以前的播放器来不及做了，今天要完新的了

小辣椒

问题今天还事情特别多，万一下午回不来，明天完成作业

小辣椒

黑黑土豪太豪气了，回帖有钱钱

小辣椒

@千羽 收礼开心

先下了

马黑黑

小辣椒 发表于 2023-2-11 11:10
@千羽 收礼开心

先下了

88

马黑黑

小辣椒 发表于 2023-2-11 10:54
黑黑土豪太豪气了，回帖有钱钱

多乎哉不多也

马黑黑

小辣椒 发表于 2023-2-11 10:53
问题今天还事情特别多，万一下午回不来，明天完成作业

明天再说

马黑黑

小辣椒 发表于 2023-2-11 10:50
千羽的沙发先留着

抢了

马黑黑

小辣椒 发表于 2023-2-11 10:50
这个宁静的场景特别喜欢

除了水不清其他都不错

马黑黑

小辣椒 发表于 2023-2-11 10:51
新的播放器样式也是别具一格，漂亮

最初设计的时候是一边的波闪，后来想想两边波闪更好吧

马黑黑

小辣椒 发表于 2023-2-11 10:53
看起来我以前的播放器来不及做了，今天要完新的了

这个简单呢，除了CSS代码量偏大一点点

红影

又弄个了个两边的波纹，漂亮。羽儿收礼开心