学习制作另一版
本帖最后由 醉美水芙蓉 于 2022-8-29 22:02 编辑 <br /><br /><style>#papa { left:-214px; width: 1024px; height: 640px; background: tan url('https://pic.imgdb.cn/item/630cbc1816f2c2beb1593a00.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #6b473c; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>
<div id="papa">
<span id="conicPlayer" data-per="00:00 00:00"></span>
<span id="lrctext">lrc歌词</span>
</div>
<script>
let lrcAr =[
['0.00','人生没有回头路(DJ 默涵伤感女版)-米灵'],
['5.02','词：徐晓岚'],
['10.04','曲：李勇军'],
['15.06','制作人：花僮'],
['20.08','出品人：花僮'],
['26.00','LRC编辑：醉美水芙蓉'],
['31.03','谁能看清我心里有多苦'],
['38.07','谁在乎明天我身在何处'],
['45.08','这一条路究竟有多残酷'],
['53.09','有太多无奈有太多无助'],
['61.03','自己选的路就不要怕苦'],
['68.07','现在退出也没有回头路'],
['76.02','如果不能哭就假装幸福'],
['83.08','任凭这世界无情的摆布'],
['91.05','我从不怕孤独从不认输'],
['98.06','哪怕错得离谱万劫不复'],
['103.00','如果人生路是一场赌注'],
['109.09','那就做一个勇敢的赌徒'],
['117.08','我从不怕孤独从不认输'],
['124.10','默默承受着寒风刺痛骨'],
['129.02','从不怕吃苦从不怕辜负'],
['136.03','如果感觉累了就放下包袱'],
['144.00','我从不怕孤独从不认输'],
['151.02','默默承受着寒风刺痛骨'],
['155.05','从不怕吃苦从不怕辜负'],
['162.06','如果感觉累了就放下包袱'],
['167.03','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=236986476&.mp3 ';
aud.autoplay = true;
aud.loop = true;
conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
let current = aud.currentTime / aud.duration * 100;
conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
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-8-29 21:50
制作漂亮。这个的请老黑给你鉴定了。
和你的情况一样吧。不过这个背景，需要复杂处理才能令内环区域的背景与帖子背景融为一体，因为背景颜色不是接近纯色快
马黑黑 发表于 2022-8-29 22:01
和你的情况一样吧。不过这个背景，需要复杂处理才能令内环区域的背景与帖子背景融为一体，因为背景颜色不 ...
黑黑老师换了颜色了！刚找到代码中的颜色！ 醉美水芙蓉 发表于 2022-8-29 22:05
黑黑老师换了颜色了！刚找到代码中的颜色！
厉害厉害{:4_190:} 马黑黑 发表于 2022-8-29 22:07
厉害厉害
是黑黑老师的代码厉害！ 醉美水芙蓉 发表于 2022-8-29 22:11
是黑黑老师的代码厉害！
哪里哪里，酱酒的 马黑黑 发表于 2022-8-29 22:01
和你的情况一样吧。不过这个背景，需要复杂处理才能令内环区域的背景与帖子背景融为一体，因为背景颜色不 ...
就是。所以我没有下评段的！ 加林森 发表于 2022-8-29 22:38
就是。所以我没有下评段的！
挺好挺好 马黑黑 发表于 2022-8-29 22:49
挺好挺好
嗯嗯。我是实话实说的。 加林森 发表于 2022-8-29 23:00
嗯嗯。我是实话实说的。
{:4_199:} 马黑黑 发表于 2022-8-29 23:05
我都不好意思了！ 水芙蓉的学习真认真，这两个帖子底图一样，倒是便于比较呢。我个人倾向于更喜欢那个透明的{:4_173:} 欣赏水芙蓉好帖{:4_187:} 红影 发表于 2022-8-30 08:36
欣赏水芙蓉好帖
谢谢红影支持！ 醉美水芙蓉 发表于 2022-8-30 17:38
谢谢红影支持！
客气了，水芙蓉美女很赞{:4_187:}
页:
[1]