春分
<style>#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp/iy.webp') center/cover no-repeat; box-shadow: 4px 8px 20px #000; position: relative; z-index: 1; }
#mplayer { left: 50%; bottom: 20px; transform: translate(-50%); width: fit-content; height: fit-content; color: tan; position: absolute; }
#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 { display: block; margin: auto; margin-bottom: -5px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; animation: rot 6s infinite linear var(--state); }
#prog { width: 400px; height: 5px; border: 1px solid tan; border-radius: 5px; display: grid; place-items: center start; position: relative; }
#prog::before, #prog::after { position: absolute; content: ''; cursor: pointer; }
#prog::before { width: var(--ww); height: 5px; border-radius: 5px; background: linear-gradient(to right, pink, green, pink); }
#prog::after { width: 100%; height: 30px; border: 0px solid red; }
.cap { position: absolute; left: calc(var(--ww) - 2px); width: 16px; height: 16px; background: pink; border-radius: 50%; }
.pic { position: absolute; left: 20%; top: 80%; width: 120px; border-radius: 50%; mix-blend-mode: multiply; filter: blur(1px) opacity(.6); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" alt="" />
<div id="mplayer" data-du="00:00" data-cu="00:00">
<img id="btn" src="https://638183.freep.cn/638183/t23/btn/meihua.png" alt="" />
<div id="prog"><span class="cap"></span></div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021177913" loop autoplay></audio>
<script>
(function() {
let canmove = false;
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('timeupdate', () => {if(!canmove) prog.style.setProperty('--ww', aud.currentTime * prog.offsetWidth / aud.duration + 'px');mplayer.dataset.cu = toMin(aud.currentTime);mplayer.dataset.du = toMin(aud.duration);});
prog.addEventListener('mousemove', (e) => {if (!canmove) return;let pos = e.offsetX;if (pos < 0) pos = 0;if (pos > prog.offsetWidth) pos = prog.offsetWidth;prog.style.setProperty('--ww', e.offsetX + 'px');});
prog.addEventListener('mousedown', (e) => canmove = true);
prog.addEventListener('mouseup', (e) => {canmove = false;aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;});
document.addEventListener('mouseup', () => canmove = false);
})();
</script>
坐沙发 欣赏中~~{:4_190:} 本帖最后由 马黑黑 于 2023-3-22 22:58 编辑
朵拉 发表于 2023-3-22 21:46
坐沙发 欣赏中~~
这个纯乐特别好听
帖子代码：《春分》源码 (freeee.ml)
黑黑，这个播放器按钮可以自己换图片的 我看见这2条鱼是很鲜活的，黑黑这个透明度可以改一下吗 欣赏美帖
https://p4.itc.cn/q_70/images03/20220320/f917ee820f2948e6ad34d68446373c76.gif 起个网名好难 发表于 2023-3-22 22:33
欣赏美帖
感谢支持 这水区不水啊！都是干货 小辣椒 发表于 2023-3-22 22:13
黑黑，这个播放器按钮可以自己换图片的
是的是的，比较容易 小辣椒 发表于 2023-3-22 22:14
我看见这2条鱼是很鲜活的，黑黑这个透明度可以改一下吗
当然可以，但最好换上更好一点的透明背景的图片 阿狄丽娜 发表于 2023-3-22 22:40
这水区不水啊！都是干货
就是水大了一点，要多晒晒货才会干{:4_170:} 很清爽养眼的制作，又是带进度条的帖子，漂亮{:4_187:} 黑黑用的免费空间啊哈哈哈{:4_169:} 马黑黑 发表于 2023-3-22 21:48
这个纯乐特别好听
帖子代码：《春分》源码 (freeee.ml)
好像我也有 china.freeee.ml{:4_205:} 风中飞尘 发表于 2023-3-22 23:34
好像我也有 china.freeee.ml
你这个还备了案的 风中飞尘 发表于 2023-3-22 23:33
黑黑用的免费空间啊哈哈哈
我也有用收费空间，就是没备案，玩玩就玩完了 红影 发表于 2023-3-22 23:24
很清爽养眼的制作，又是带进度条的帖子，漂亮
这个进度条可以拖曳 马黑黑 发表于 2023-3-22 23:39
你这个还备了案的
没有备案 我用的二级域名 这个后缀 ml也无法备案我用着玩玩我用其他的服务器 风中飞尘 发表于 2023-3-23 00:04
没有备案 我用的二级域名 这个后缀 ml也无法备案我用着玩玩我用其他的服务器
额，我见底部有备案信息。 春分，其实春深了。