晨曲 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2022-10-6 07:34

晨曲

马黑黑 发表于 2022-10-6 07:38

参考代码（本地测试模式）
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: gray url('quiet.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; right: 100px; width: 300px; height: 60px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { opacity: .75; }
#btnwrap { --yy: -20px; padding: 0; background: none; box-sizing: border-box; transition: .3s; position: absolute; display: grid; place-items: center; opacity: 0; }
#btnwrap::before { content: ''; position: absolute; width: 40px; height: 40px; border: 3px dotted olive; border-radius: 50%; transform: translateX(-10px); }
#btnwrap:hover { border-left-color: olive; }
.play { height: 20px; border: 0px solid transparent; border-left-color: hsla(50,100%,90%,.55); border-width: 12px 0 12px 18px; }
.pause { border-style: double; border-width: 0 0 0 18px; }
#prog { --yy: 15px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(50,10%,0%,.65), hsla(50,100%,40%,.55) 100%, transparent 0); border: 1px solid hsla(25,100%,95%,.45); font: normal 14px / 16px sans-serif; text-align: center; color: hsl(168,100%,50%); transition: .3s }
#tit { position: absolute; top: 0; padding: 20px; text-align: center; font: bold 3.6em sans-serif; color: hsla(25,100%,95%,.65); letter-spacing: 3px; text-shadow: 0 8px 9px hsla(25,20%,50%,.55), 0px -2px 1px hsla(25,100%,100%,.75); }
</style>

<div id="papa">
<img src="fish.gif" alt="" style="width: 100px; transform: translate(160px, 200px); mix-blend-mode: screen; "/>
<div id="tit">晨曲</div>
<div id="mplayer">
<div id="prog">00:00 | 00:00</div>
<div id="btnwrap" class="play"></div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1487066170.mp3" loop="loop" autoplay="autoplay"></audio>

<script>
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(50,20%,0%,.65), hsla(50,100%,40%,.55) ' + aud.currentTime / aud.duration * 100 + '%, hsla(50,100%,100%,.5) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let mState = () => btnwrap.className = aud.paused ? 'play' : 'play pause';
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;};
</script>

马黑黑 发表于 2022-10-6 07:43

本帖尝试：

一、单标签播放暂停按钮的实际应用

二、论坛支持 webp 附件情况

红影发表于 2022-10-6 07:58

晨光笼罩着晨曲两字，水边的女孩很悠然自在，那两条半透明的小鱼也很灵动，漂亮{:4_187:}

红影发表于 2022-10-6 07:58

马黑黑发表于 2022-10-6 07:43
本帖尝试：

一、单标签播放暂停按钮的实际应用

单标签播放按钮也很漂亮的{:4_187:}

马黑黑 发表于 2022-10-6 08:00

本帖最后由马黑黑于 2022-10-6 23:13 编辑 <br /><br />红影发表于 2022-10-6 07:58
单标签播放按钮也很漂亮的
本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家{:4_170:}

<script>
papa.style.background = 'url("https://638183.freep.cn/638183/t22/webp/quiet.webp")';
</script>

马黑黑 发表于 2022-10-6 08:01

红影发表于 2022-10-6 07:58
晨光笼罩着晨曲两字，水边的女孩很悠然自在，那两条半透明的小鱼也很灵动，漂亮

那鱼是神鱼，修炼了一万年

山人发表于 2022-10-6 09:53

评分后音乐能继续，进度条、按钮失效

红影发表于 2022-10-6 11:32

马黑黑发表于 2022-10-6 08:00
本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家

这个语言现在很准确呢{:4_173:}

红影发表于 2022-10-6 11:33

马黑黑发表于 2022-10-6 08:01
那鱼是神鱼，修炼了一万年

一万年早成精了，怎么还会在水里{:4_173:}

醉美水芙蓉 发表于 2022-10-6 11:46

马黑黑 发表于 2022-10-6 11:46

醉美水芙蓉发表于 2022-10-6 11:46
景色很漂亮！鱼儿游得很欢喔！谢谢黑黑老师分享佳作！

{:4_190:}

马黑黑 发表于 2022-10-6 11:47

红影发表于 2022-10-6 11:32
这个语言现在很准确呢

照顾一下情绪

马黑黑 发表于 2022-10-6 11:47

红影发表于 2022-10-6 11:33
一万年早成精了，怎么还会在水里

这不国庆放假吗？来人间仙境旅游旅游，拉动疫情下的内需

小辣椒 发表于 2022-10-6 12:25

马黑黑发表于 2022-10-6 08:00
本来不想做，小辣椒预言要“横空出世”，那就做做吧，不好打击预言家
果然~~黑黑武威的{:4_178:}

马黑黑 发表于 2022-10-6 12:43

小辣椒发表于 2022-10-6 12:25
果然~~黑黑武威的

{:4_203:}

小辣椒 发表于 2022-10-6 12:57

马黑黑发表于 2022-10-6 12:43

哈哈~~秒做出来了，但我暂时不能完成作业。。。。。休息几天再说

马黑黑 发表于 2022-10-6 13:11

小辣椒发表于 2022-10-6 12:57
哈哈~~秒做出来了，但我暂时不能完成作业。。。。。休息几天再说

不急慢慢来

三月的阳光 发表于 2022-10-6 13:16

黑黑老师制作漂亮，音乐好听~~{:4_199:}{:4_187:}

闲言不语 发表于 2022-10-6 13:35

厉害了马黑黑！{:4_199:}

页: [1] 2 3

花潮论坛's Archiver

晨曲