珠穆朗玛

马黑黑

马黑黑

本帖测试新制作的细线进度条播放器，不做特效装饰：

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/vmlm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center; }
   
3. #prog { position: absolute; bottom: 20px; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; }
   
4. #prog::before, #prog::after { position: absolute; top: -30px; }
   
5. #prog::before { content: attr(data-cu); left: 0; }
   
6. #prog::after { right: 0; content: attr(data-du); }
   
7. #slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
   
8. #btnplay { position: absolute; top: -50px; width: 38px; height: 38px; background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -4px -9px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
   
9. @keyframes rot { to { transform: rotate(1turn); } }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.     <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
    
14.         <span id="btnplay" title="播放/暂停"></span>
    
15.         <span id="slider"></span>
    
16.     </div>
    
17. </div>
    
18. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130919" autoplay loop></audio>
    
19. 
    
20. <script>
    
21. let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
    
22. let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
23. aud.addEventListener('pause', mState, false);
    
24. aud.addEventListener('play', mState, false);
    
25. aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
    
26. btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
27. prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
    
28. </script>
    

复制代码

马黑黑

纯播放器代码

1. <style>
   
2. #prog {
   
3.         position: absolute;
   
4.         top: 100px;
   
5.         left: 50px;
   
6.         width: 300px;
   
7.         height: 12px;
   
8.         background: linear-gradient(to right, red var(--prg), gray 0) repeat-x 0 50% / 100% 1px;
   
9.         color: gray;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         --prg: 0%; --state: paused;
    
13. }
    
14. #prog::before, #prog::after { position: absolute; top: -30px; }
    
15. #prog::before { content: attr(data-cu); left: 0; }
    
16. #prog::after { right: 0; content: attr(data-du); }
    
17. #slider { position: absolute; width: 3px; height: 7px; background: red; left: var(--prg); }
    
18. #btnplay {
    
19.         position: absolute;
    
20.         top: -50px;
    
21.         width: 38px;
    
22.         height: 38px;
    
23.         background: url('./pic/flowers-01.png') no-repeat -4px -9px;
    
24.         cursor: pointer;
    
25.         animation: rot 6s infinite linear var(--state);
    
26. }
    
27. @keyframes rot { to { transform: rotate(1turn); } }
    
28. </style>
    
29. 
    
30. <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
    
31.         <span id="btnplay" title="播放/暂停"></span>
    
32.         <span id="slider"></span>
    
33. </div>
    
34. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130919" autoplay loop></audio>
    
35. 
    
36. <script>
    
37. let toMin = (val)  => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
    
38. let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
39. aud.addEventListener('pause', mState, false);
    
40. aud.addEventListener('play', mState, false);
    
41. aud.addEventListener('timeupdate', () => {
    
42.         prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
    
43.         prog.dataset.cu = toMin(aud.currentTime);
    
44.         prog.dataset.du = toMin(aud.duration);
    
45. });
    
46. btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
47. prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
    
48. </script>

复制代码

马黑黑

按钮CSS代码，

    background: url('./pic/flowers-01.png') no-repeat -4px -9px;

是从一张有多个图形的图片中剪裁出一个图案，红色代码就是剪裁的起始XY坐标。xy坐标值均使用负数，表示将图片往元素的左边、上边分别移动若干像素；酱紫之后，按钮元素就以自己的宽、高显示图片XY坐标值之后的部分，图片剩余的部分不会显示。具体一点讲，本例中，按钮使用的图片，从图片的 {4px, 9px} 处开始，用到图片的 {38+4=42px, 38+9=47px} 的地方，其中，38 是按钮的宽与高的尺寸。

若使用的是单图案图片，则无需剪裁，直接使用：

    background: url('./pic/flowers-01.png') no-repeat center / cover;

红色部分的代码，是为了确保图片居中且以最佳的尺寸比例呈现在按钮之上

梦油

寂静的珠穆朗玛峰宛如一座巍然耸立的冰雪巨塔，美丽、壮观。

红影

马黑黑 发表于 2023-7-23 08:48
按钮CSS代码，

    background: url('./pic/flowers-01.png') no-repeat -4px -9px;

这个有意思，还弄了个这样的图图，可以让我们对底图的位置操作又复习了一遍呢
看了一下那张图图，38是量出来的单个小标志的大小吧，也去量了一下，小标志和小标志的间距大约是14，如此若想用第二个小标志应该是{56px, 9px}处开始吧，还没去试，感觉应该差不多

红影

这个代码十分简洁，效果却是很棒。进度条上的滑块变常规的小方块了，额外给了按钮。按钮就可以自己随意去找喜欢的小图标了。

马黑黑

红影 发表于 2023-7-23 10:50
这个代码十分简洁，效果却是很棒。进度条上的滑块变常规的小方块了，额外给了按钮。按钮就可以自己随意去找 ...

目的在这里

马黑黑

梦油 发表于 2023-7-23 09:45
寂静的珠穆朗玛峰宛如一座巍然耸立的冰雪巨塔，美丽、壮观。

嗯嗯。很久很久以前，这里是大海

马黑黑

红影 发表于 2023-7-23 10:47
这个有意思，还弄了个这样的图图，可以让我们对底图的位置操作又复习了一遍呢
看了一下那张图 ...

如果左右两边都留一点点空白，则上下一起留。

梦油

马黑黑 发表于 2023-7-23 11:57
嗯嗯。很久很久以前，这里是大海

是的，我也听说过这样的说法。

马黑黑

梦油 发表于 2023-7-23 14:53
是的，我也听说过这样的说法。

考古结果已经证实了这一点

梦油

马黑黑 发表于 2023-7-23 17:22
考古结果已经证实了这一点

哦，知道了。

马黑黑

梦油 发表于 2023-7-23 17:32
哦，知道了。

通俗的说吧，已经找到海洋沉积层，而且非常分明、清晰。

梦油

马黑黑 发表于 2023-7-23 17:37
通俗的说吧，已经找到海洋沉积层，而且非常分明、清晰。

我们的科学技术真先进啊。

马黑黑

梦油 发表于 2023-7-23 17:49
我们的科学技术真先进啊。

这个是很早以前就发现了

梦油

马黑黑 发表于 2023-7-23 17:55
这个是很早以前就发现了

地球变化很大。

马黑黑

梦油 发表于 2023-7-23 20:00
地球变化很大。

嗯，地球有46亿年了，"人到中年"了

马黑黑

醉美水芙蓉 发表于 2023-7-23 19:51
老师这是去考古了！