珠穆朗玛

马黑黑 发表于 2023-7-23 08:31

马黑黑 发表于 2023-7-23 08:32

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

<style>
#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; }
#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; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
#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); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"></span>
<span id="slider"></span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130919" autoplay loop></audio>

<script>
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; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

马黑黑 发表于 2023-7-23 08:33

纯播放器代码

<style>
#prog {
position: absolute;
top: 100px;
left: 50px;
width: 300px;
height: 12px;
background: linear-gradient(to right, red var(--prg), gray 0) repeat-x 0 50% / 100% 1px;
color: gray;
display: grid;
place-items: center;
--prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: red; left: var(--prg); }
#btnplay {
position: absolute;
top: -50px;
width: 38px;
height: 38px;
background: url('./pic/flowers-01.png') no-repeat -4px -9px;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"></span>
<span id="slider"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29130919" autoplay loop></audio>

<script>
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; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
prog.dataset.cu = toMin(aud.currentTime);
prog.dataset.du = toMin(aud.duration);
});
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

马黑黑 发表于 2023-7-23 08:48

按钮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 09:45

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

红影发表于 2023-7-23 10:47

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

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

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

红影发表于 2023-7-23 10:50

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

马黑黑 发表于 2023-7-23 11:57

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

目的在这里

马黑黑 发表于 2023-7-23 11:57

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

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

马黑黑 发表于 2023-7-23 11:58

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

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

梦油发表于 2023-7-23 14:53

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

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

马黑黑 发表于 2023-7-23 17:22

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

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

梦油发表于 2023-7-23 17:32

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

哦，知道了。

马黑黑 发表于 2023-7-23 17:37

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

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

梦油发表于 2023-7-23 17:49

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

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

马黑黑 发表于 2023-7-23 17:55

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

这个是很早以前就发现了

醉美水芙蓉 发表于 2023-7-23 19:51

梦油发表于 2023-7-23 20:00

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

地球变化很大。

马黑黑 发表于 2023-7-23 21:03

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

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

马黑黑 发表于 2023-7-23 21:03

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

{:4_181:}

页: [1] 2 3 4 5

花潮论坛's Archiver

珠穆朗玛