学习黑黑老师播放器代码帖《春》回致黑黑老师
本帖最后由 千羽 于 2023-3-25 21:23 编辑 <br /><br /><style>#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/641ee21fa682492fccee7236.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { left: 46%; 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(230px -0px 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=141261" 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> 沙发，漂亮~~{:4_204:} 朵拉 发表于 2023-3-25 20:15
沙发，漂亮~~
问好朵拉，谢谢{:4_187:} @黑黑老师，昨天那图应该送你的，忘了打上字，今天补上{:4_187:} 虽然有点不搭，但很喜欢这晃动的大黑爪子……{:4_173:} 精灵的影子可以考虑在别的地方，比如菇凉抬起的脚的正下方 #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; }
红色部分的代码就是阴影。drop-shadow(160px -136px 0 green) 里的参数，160px 是水平方向，-136px 是垂直方向，改改它们就可定位阴影到自己希望的地方
本帖最后由 千羽 于 2023-3-25 20:31 编辑
马黑黑 发表于 2023-3-25 20:25
#btn { margin: auto; width: 50px; height: 72px; background: url('https://638183.freep.cn/638183/t23/ ...
那我改错了，成了挠痒痒了{:4_173:} 千羽 发表于 2023-3-25 20:30
那我改错了，成了挠痒痒了
可以继续调整。你会PS，对尺寸应该是敏感的。 马黑黑 发表于 2023-3-25 20:32
可以继续调整。你会PS，对尺寸应该是敏感的。
改了，还想再改下{:4_181:} 千羽 发表于 2023-3-25 20:37
改了，还想再改下
你连播放器的位置都改了，厉害了 马黑黑 发表于 2023-3-25 20:38
你连播放器的位置都改了，厉害了
它俩应该放一起的{:4_203:} 马黑黑 发表于 2023-3-25 20:32
可以继续调整。你会PS，对尺寸应该是敏感的。
黑黑老师，现在这个位置可以吗？ 千羽 发表于 2023-3-25 20:43
黑黑老师，现在这个位置可以吗？
这不是要回到原处了吗 千羽 发表于 2023-3-25 20:42
它俩应该放一起的
是的，但可以随意调整 马黑黑 发表于 2023-3-25 20:48
是的，但可以随意调整
现在位置颠倒了，再改还要调试多次……{:4_203:} 千羽 发表于 2023-3-25 21:01
现在位置颠倒了，再改还要调试多次……
你没有像素尺吗？量一量，八九不离十 马黑黑 发表于 2023-3-25 21:02
你没有像素尺吗？量一量，八九不离十
有点懒了{:4_173:} 千羽 发表于 2023-3-25 21:03
有点懒了
晚上吃的太好会懒{:4_170:} 马黑黑 发表于 2023-3-25 21:04
晚上吃的太好会懒
哈哈，没有啊，刚回来{:4_173:}