谢谢队长，制作真漂亮啊
清舟喜欢就好！我是回你的帖啊！开心啊！
<style>
.mama { left: -214px; width: 1024px; height: 600px; background: lightblue url('https://pic.imgdb.cn/item/62a9753e0947543129c7e310.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
.vid { position: absolute; width: 100%; height: 800px; top: -200px; object-fit: cover; opacity: .35;}
.wrap { left: 20px; bottom: 20px; width: fit-content; height:fit-content; padding: 10px; display: flex;align-items: center; gap: 8px; background: rgba(0,200,200,.6) linear-gradient(to right bottom, rgba(0,0,0,.75),rgba(255,255,255,.4)); box-shadow: 2px 2px 2px #000; position: absolute; }
.lrcbox { min-width: 360px; font: normal 1.1em / 1.5em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
.progress { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: conic-gradient(from 180deg,tan 0%,transparent 0%); cursor: pointer; position: relative; }
.progress::before { position: absolute; content: attr(data-per); width: 100%; height: 100%; border-radius: 50%; background: transparent radial-gradient(#eee,transparent); text-align: center; font: normal 15px / 90px sans-serif; }
.lighten { color: #fff; font-weight: bold; font-size: 1.2em; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="wrap">
<div class="progress" data-per="0%"></div>
<div class="lrcbox"> Loading ...</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=178178.mp3" autoplay="autoplay" loop="loop">old browser</audio>
<div style="position: absolute; left:420px; top: 900px; width:75px; height: 20px; ">
<img alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif"/></div>
</div>
<script>
let lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
progress = document.querySelector('.progress');
let lrcAr = [
['2.85','天葬 - 亚东'],
['4.43','歌手：亚东'],
['7.78','所属专辑：天葬'],
['20.43','默默的向你挥挥手，'],
['80.30','告别我们轮回的缘分。'],
['87.28','应招而来天的神鹰，'],
['94.08','请你带走我一生的荣耀。'],
['111.24','轻轻走过曾经的家，'],
['120.30','记住千年不变的誓言。'],
['128.08','应招而来天的神鹰，'],
['134.25','请你打开我阳光的天路。'],
['156.94','如此安宁如此安祥，'],
['163.94','多么美妙神奇的时光。'],
['171.06','死亡在消失生命已经飞翔，'],
['177.87','远去的翅膀上。'],
['185.18','如此安宁如此安祥，'],
['192.41','多么美妙神奇的时光。'],
['199.59','死亡在消失生命已经飞翔，'],
['206.84','远去的翅膀上。'],
['219.18','默默的向你挥挥手，'],
['226.06','告别我们轮回的缘分。'],
['233.54','应招而来天的神鹰，'],
['239.65','请你带走我一生的荣耀。'],
['255.62','轻轻走过曾经的家，'],
['262.41','记住千年不变的誓言。'],
['269.72','应招而来天的神鹰，'],
['275.69','请你打开我阳光的天路。'],
['292.54','默默的向你挥挥手，'],
['298.65','告别我们轮回的缘分。'],
['306.34','应招而来天的神鹰，'],
['312.26','请你带走我一生的荣耀。'],
['326.04','一生的荣耀'],
['328.08','lrc制作：加林森']
];
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime, str = '';
setProgress(aud.duration,tt);
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
if(j > 0) str = lrcAr + '<br>';
str += '<span class="lighten">' + lrcAr + '</span>';
if(j < lrcAr.length - 1) str += '<br>' + lrcAr;
lrcbox.innerHTML = str;
}
}
})
progress.onclick = () => aud.paused ? aud.play() : aud.pause();
function setProgress(task,current) {
if(task <= 0 || current <= 0) return false;
let prog = 100 * current / task;
progress.style.background = `conic-gradient(from 180deg,tan ${prog}%,transparent ${prog}%)`;
progress.setAttribute('data-per',prog.toFixed(2) + '%');
}
</script>
绿叶清舟 发表于 2022-5-6 21:44
谢谢队长，制作真漂亮啊
清舟喜欢就好！{:4_171:} 大猫咪 发表于 2022-5-6 21:38
不客气啊队长，一起欣赏音乐，多开心 辛苦了
不辛苦的 东篱闲人 发表于 2022-5-6 21:46
比俄罗斯都强大。。。
必须的。。。{:4_189:} 绿叶清舟 发表于 2022-5-6 21:47
歌也好听，很欢快的感觉
喜欢就好！ 东篱闲人 发表于 2022-5-6 21:46
比俄罗斯都强大。。。
差不多吧。。。{:4_189:} 马黑黑 发表于 2022-5-6 22:53
挺好的
嗯嗯，谢谢老黑了！ 再来欣赏一下 加林森 发表于 2022-5-6 23:00
清舟喜欢就好！
很喜欢了，谢谢队长 绿叶清舟 发表于 2022-5-7 22:05
很喜欢了，谢谢队长
嗯嗯，我又跑带你防区发了一个帖，你去听听。 加林森 发表于 2022-5-7 22:41
嗯嗯，我又跑带你防区发了一个帖，你去听听。
一眼看成防疫区了{:4_189:} 绿叶清舟 发表于 2022-5-8 16:49
一眼看成防疫区了
习惯了吧{:4_172:} 加林森 发表于 2022-5-8 16:56
习惯了吧
是啊，现在担心解封了不知道咋过了{:4_189:} 绿叶清舟 发表于 2022-5-8 17:08
是啊，现在担心解封了不知道咋过了
该咋过还是得过。{:4_189:} 加林森 发表于 2022-5-8 17:18
该咋过还是得过。
就是没有过不去的了{:4_189:} 绿叶清舟 发表于 2022-5-8 20:29
就是没有过不去的了
对头。该吃吃该睡觉就睡觉，幸福地把自己养好就行了。{:4_189:} 加林森 发表于 2022-5-8 20:33
对头。该吃吃该睡觉就睡觉，幸福地把自己养好就行了。
不能养太好了{:4_189:} 绿叶清舟 发表于 2022-5-8 20:36
不能养太好了
{:4_172:}
页:
1
[2]