大地

马黑黑

:doodle { @size: 900px 598px; background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg'); box-shadow: 0 0 8px #000; position: relative; margin: 0 0 0 calc(50% - 531px); z-index: 1; --ww: 300px; /* 进度条总长 */ --prog: 0; /* 进度 */ --tt1: '00:00'; /* 当前播放时间 */ --tt2: '00:00'; /* 音乐时长 */ --xplace: 50%; /* 播放器水平定位 */ --yplace: 98%; /* 播放器垂直定位 */ --color: snow; --state: paused; /* 关键帧运行状态 */ } /* 单元格1 ：进度条 */ @nth(1) { @size: var(--ww) 2px; @place: var(--xplace) var(--yplace); background: silver; :before, :after { content: ''; } :before { position: absolute; left: 0; width: var(--prog); height: 100%; background: var(--color); } :after { width: 100%; height: 10px; cursor: pointer; } } /* 单元格2 ：播放时间信息 */ @nth(2) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after{ position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; } } /* 单元格3和4 ：播放按钮 */ @nth(3,4) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; } @nth(3) { @size: 50px; @shape: clover 4; background: var(--color); animation: rot 6s infinite linear var(--state); } @match(i ≥ 5) { @size: 100px 88px; @place: 50px 44px; background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif'); offset-path: path('M50 44 Q500 300 900 44'); offset-distance: 0%; animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes fly { to { offset-distance: 100%; }}

马黑黑

帖子代码

1. <css-doodle grid="1x6" id="papa">
   
2.         :doodle {
   
3.                 @size: 900px 598px;
   
4.                 background: url('https://638183.freep.cn/638183/t23/2/dadi.jpg');
   
5.                 box-shadow: 0 0 8px #000;
   
6.                 position: relative;
   
7.                 margin: 0 0 0 calc(50% - 531px);
   
8.                 z-index: 1;
   
9.                 --ww: 300px; /* 进度条总长 */
   
10.                 --prog: 0; /* 进度 */
    
11.                 --tt1: '00:00'; /* 当前播放时间 */
    
12.                 --tt2: '00:00'; /* 音乐时长 */
    
13.                 --xplace: 50%; /* 播放器水平定位 */
    
14.                 --yplace: 98%; /* 播放器垂直定位 */
    
15.                 --color: snow;
    
16.                 --state: paused; /* 关键帧运行状态 */
    
17.         }
    
18.         /* 单元格1 ：进度条 */
    
19.         @nth(1) {
    
20.                 @size: var(--ww) 2px;
    
21.                 @place: var(--xplace) var(--yplace);
    
22.                 background: silver;
    
23.                 :before, :after { content: ''; }
    
24.                 :before {
    
25.                         position: absolute;
    
26.                         left: 0;
    
27.                         width: var(--prog);
    
28.                         height: 100%;
    
29.                         background: var(--color);
    
30.                 }
    
31.                 :after {
    
32.                         width: 100%;
    
33.                         height: 10px;
    
34.                         cursor: pointer;
    
35.                 }
    
36.         }
    
37.         /* 单元格2 ：播放时间信息 */
    
38.         @nth(2) {
    
39.                 @size: var(--ww) 20px;
    
40.                 @place: var(--xplace) calc(var(--yplace) - 20px);
    
41.                 :before, :after{
    
42.                         position: absolute;
    
43.                         width: 100%;
    
44.                         height: 100%;
    
45.                         color: var(--color);
    
46.                 }
    
47.                 :before { content: var(--tt1); }
    
48.                 :after { content: var(--tt2); text-align: right; }
    
49.         }
    
50. 
    
51.         /* 单元格3和4 ：播放按钮 */
    
52.         @nth(3,4) {
    
53.                 @size: 60px;
    
54.                 @place: var(--xplace) calc(var(--yplace) - 36px);
    
55.                 cursor: pointer;
    
56.         }
    
57.         @nth(3) {
    
58.                 @size: 50px;
    
59.                 @shape: clover 4;
    
60.                 background: var(--color);
    
61.                 animation: rot 6s infinite linear var(--state);
    
62.         }
    
63.         @match(i ≥ 5) {
    
64.                 @size: 100px 88px;
    
65.                 @place: 50px 44px;
    
66.                 background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
    
67.                 offset-path: path('M50 44 Q500 300 900 44');
    
68.                 offset-distance: 0%;
    
69.                 animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state);
    
70.         }
    
71.         @keyframes rot { to { transform: rotate(360deg); } }
    
72.         @keyframes fly { to { offset-distance: 100%; }}
    
73. </css-doodle>
    
74. 
    
75. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=438980" autoplay="autoplay" loop="loop"></audio>
    
76. 
    
77. <script>
    
78. (function(){
    
79.         let script = document.createElement('script');
    
80.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
81.         document.head.appendChild(script);
    
82.         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;};
    
83.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
84.         aud.addEventListener('timeupdate', () => {
    
85.                 papa.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');
    
86.                 papa.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);
    
87.                 papa.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
    
88.         });
    
89.         aud.addEventListener('play', mState, false);
    
90.         aud.addEventListener('pause', mState, false);
    
91.         window.onload = () => {
    
92.                 let btns = papa.shadowRoot.querySelectorAll('cell');
    
93.                 let ww = parseInt(window.getComputedStyle(papa).getPropertyValue('--ww'));
    
94.                 btns[3].onclick = () => aud.paused ? aud.play() : aud.pause();
    
95.                 btns[0].onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
    
96.         }
    
97. })();
    
98. </script>

复制代码

千羽

这个播放器好看，小巧精致

马黑黑

千羽 发表于 2023-6-8 21:29
这个播放器好看，小巧精致

红影

grid="1x6"是横向排布的6个格子，要是6*1也行的吧，反正每个格子里都另外定位了。

红影

鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

红影

喜欢带进度条的播放器，自己可以控制进度了

红影

红影 发表于 2023-6-8 22:00
鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

刷新后看出来间隔的变化了

焱鑫磊

欣赏老师佳作！

马黑黑

红影 发表于 2023-6-8 21:57
grid="1x6"是横向排布的6个格子，要是6*1也行的吧，反正每个格子里都另外定位了。

都可以的

马黑黑

焱鑫磊 发表于 2023-6-8 22:09
欣赏老师佳作！

马黑黑

红影 发表于 2023-6-8 22:00
鹰有意思，好像calc(@r(1,10) * -1s)也看不出来变化啊，出来的时间间隔感觉差不多呢。

随机变变

马黑黑

红影 发表于 2023-6-8 22:04
刷新后看出来间隔的变化了

这里是概率问题，偶尔会并排飞

马黑黑

红影 发表于 2023-6-8 22:01
喜欢带进度条的播放器，自己可以控制进度了

其实也不太复杂，代码偏多一些而已吧

马黑黑

醉美水芙蓉 发表于 2023-6-8 23:50
这个只能纯欣赏了！完全不懂了！

代码逻辑很清晰的

红影

马黑黑 发表于 2023-6-8 22:36
其实也不太复杂，代码偏多一些而已吧

虽然代码多了一点，但是特别喜欢

红影

马黑黑 发表于 2023-6-8 22:36
这里是概率问题，偶尔会并排飞

嗯嗯，关键看@r(1,10)的取值。这个它是自由取的。

红影

马黑黑 发表于 2023-6-8 22:34
都可以的

嗯嗯，知道了

红影

马黑黑 发表于 2023-6-8 22:35
随机变变

变得很自在