炁
<style>#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t23/webp/qi1.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { left: 50%; bottom: 20px; transform: translate(-50%); width: fit-content; height: fit-content; color: #333; position: absolute; --state: paused; --ww: 0px; }
#mplayer::before, #mplayer::after { position: absolute; content: attr(data-cu); bottom: 16px; }
#mplayer::before { left: 10px; }
#mplayer::after { content: attr(data-du); right: 10px; }
#btn { margin: auto; width: 50px; height: 72px; background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp'); background-position: 0 0; filter: drop-shadow(160px -136px 0 green); animation: hi 1s steps(10,jump-none) infinite var(--state); cursor: pointer; position: relative; }
#btn::before { position: absolute; content: ''; width: inherit; height: inherit; cursor: inherit; left: 160px; top: -136px; }
#prog { width: 300px; height: 6px; border: 1px solid #666; border-radius: 6px; display: grid; place-items: center start; position: relative; }
#prog::before, #prog::after { position: absolute; content: ''; height: 6px; }
#prog::before { background: red; border-radius: 10px; width: calc(var(--ww) + 16px); }
#prog::after { left: var(--ww); width: 16px; height: 16px; background: red; border-radius: 50%; }
@keyframes hi { to { background-position: 100% 0; } }
</style>
<div id="papa">
<div id="mplayer" data-du="00:00" data-cu="00:00">
<div id="btn"></div>
<div id="prog"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1860430971" autoplay loop></audio>
</div>
<script>
(function(){
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;};
btn.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => prog.style.setProperty('--time', aud.duration + 's'));
aud.addEventListener('timeupdate', () => {mplayer.style.setProperty('--ww', mplayer.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.du = toMin(aud.duration);mplayer.dataset.cu = toMin(aud.currentTime);});
prog.addEventListener('click', (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth);
})();
</script>
帖子代码
<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t23/webp/qi1.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { left: 50%; bottom: 20px; transform: translate(-50%); width: fit-content; height: fit-content; color: #333; position: absolute; --state: paused; --ww: 0px; }
#mplayer::before, #mplayer::after { position: absolute; content: attr(data-cu); bottom: 16px; }
#mplayer::before { left: 10px; }
#mplayer::after { content: attr(data-du); right: 10px; }
#btn { margin: auto; width: 50px; height: 72px; background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp'); background-position: 0 0; filter: drop-shadow(160px -136px 0 green); animation: hi 1s steps(10,jump-none) infinite var(--state); cursor: pointer; position: relative; }
#btn::before { position: absolute; content: ''; width: inherit; height: inherit; cursor: inherit; left: 160px; top: -136px; }
#prog { width: 300px; height: 6px; border: 1px solid #666; border-radius: 6px; display: grid; place-items: center start; position: relative; }
#prog::before, #prog::after { position: absolute; content: ''; height: 6px; }
#prog::before { background: red; border-radius: 10px; width: calc(var(--ww) + 16px); }
#prog::after { left: var(--ww); width: 16px; height: 16px; background: red; border-radius: 50%; }
@keyframes hi { to { background-position: 100% 0; } }
</style>
<div id="papa">
<div id="mplayer" data-du="00:00" data-cu="00:00">
<div id="btn"></div>
<div id="prog"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1860430971" autoplay loop></audio>
</div>
<script>
(function(){
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;};
btn.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => prog.style.setProperty('--time', aud.duration + 's'));
aud.addEventListener('timeupdate', () => {mplayer.style.setProperty('--ww', mplayer.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.du = toMin(aud.duration);mplayer.dataset.cu = toMin(aud.currentTime);});
prog.addEventListener('click', (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth);
})();
</script>
css分行源码：
http://mahei.freeee.ml/art/bshow.php?st=4&sd=4&art=mahei_1679358806 欣赏美帖
‘炁’ 不认识，百度查了一下{:5_117:} 这个小连续动作分解图作为播放按钮真好看。床上还有个投影呢，很活泼可爱{:4_173:} 本体和投影都能点击暂停。这个带播放进度条的好，可以快进音乐呢{:4_187:} 炁，这字我见过，在修仙小说里。应该是道教的专用语吧。这音乐叫这个名字，有意思{:4_187:} 红影 发表于 2023-3-21 12:15
炁，这字我见过，在修仙小说里。应该是道教的专用语吧。这音乐叫这个名字，有意思
是的{:4_181:} 红影 发表于 2023-3-21 12:13
本体和投影都能点击暂停。这个带播放进度条的好，可以快进音乐呢
可以的 起个网名好难 发表于 2023-3-21 09:01
欣赏美帖
‘炁’ 不认识，百度查了一下
偏僻字 红影 发表于 2023-3-21 12:12
这个小连续动作分解图作为播放按钮真好看。床上还有个投影呢，很活泼可爱
本来想做成多个阴影的，发现投射出去的会多一个，而且不好控制{:4_170:}
这东西无孔不入，无处不在。有点神秘兮兮滴{:4_173:} 樵歌 发表于 2023-3-21 13:02
这东西无孔不入，无处不在。有点神秘兮兮滴
精灵就是如此 马黑黑 发表于 2023-3-21 12:47
可以的
特别喜欢这样播放器{:4_187:} 马黑黑 发表于 2023-3-21 12:49
本来想做成多个阴影的，发现投射出去的会多一个，而且不好控制
哦，想象不出多个阴影是什么样的{:4_173:} 红影 发表于 2023-3-21 16:43
哦，想象不出多个阴影是什么样的
一般不会多出，但就是试得出来。有空你也可以试试。 红影 发表于 2023-3-21 16:42
特别喜欢这样播放器
可控进度条 马黑黑 发表于 2023-3-21 13:08
精灵就是如此
比神厉害啊 不认识的标题，标个拼音呗。。。。{:4_170:} 我昨天做的那个能直接发论坛不能。。把JS地址补全了