如果这都不算爱（学习黑黑最新歌词同步）
<style>.outerbox {
position: relative;
left: -302px;
top:120px;
width: 1200px;
height: 675px;
background: #888 url('https://pic.imgdb.cn/item/62a18f1d0947543129678f3a.jpg') no-repeat center/cover;;
box-shadow: 2px 2px 8px rgba(0,0,0,.95);
border-radius:12px;
overflow: hidden;
}
.shipin {
position: absolute;
width: 1200px;
height: 675px;
object-fit: fill;
top:0px;left:0px;
clip-path:polygon(2% 9%, 98% 9%, 98% 98%, 2% 98%);
}
.lrcWrap { left: 290px; top: 100px; padding: 26px; width: fit-content; height: fit-content; border-radius: 50%; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; cursor: pointer; position: absolute; }
.lrcWrap p { margin: 0; padding: 10px; color: #9C8320; font: bold 1.4em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px;overflow: hidden; user-select: none; position: relative; }
.meter { margin: 16px 0; position: relative; width: 120px; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="outerbox">
<video class="shipin" src="https://img.tukuppt.com/video_show/2475824/00/01/73/5b4952baa51ed.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div class="lrcWrap">
<p>★★☆如果这都不算爱☆★★</p>
<div class="lrcBox">
<ul class="lrcUl"></ul>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<div style="position: absolute; left:730px; top: 180px; width:356px;">
<img alt="" src="https://pic.imgdb.cn/item/62a200920947543129083b88.png"/></div>
<div style="position: absolute; left:0px; top: -10px; width:650px;">
<img alt="" src="https://pic.imgdb.cn/item/62a18f8f0947543129682f63.gif"/></div>
</div><br><br><br><br><br><br>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=473336054.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcWrap = document.querySelector('.lrcWrap'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //同步时差
let lrcAr = [
['0.28','《如果这都不算爱》'],
['5.28','演唱：张学友'],
['10.38','马黑黑版LRC制作器'],
['15.48','制作：红影'],
['20.68','是否爱就是忍耐 不问该不该'],
['28.76','都怪我没能耐 转身走开'],
['36.85','难道牺牲才精彩 伤痛才实在'],
['42.62','要为你流下泪来 才证明是爱'],
['52.15','如果这都不算爱'],
['56.21','我有什么好悲哀'],
['60.27','谢谢你的慷慨'],
['63.18','是我自己活该'],
['68.43','如果这都不算爱'],
['72.48','我有什么好悲哀'],
['76.46','你只要被期待'],
['79.35','不要真正去爱 OH NO'],
['85.83','还要怎么的表白 才不算独白'],
['93.93','都怪我没能耐 转身走开'],
['102.02','难道牺牲才精彩 伤痛才实在'],
['107.92','要为你流下泪来 才证明是爱'],
['134.52','你的感情太易割爱'],
['138.58','把未来转眼就删改'],
['142.77','我的心却为你空白了一块'],
['149.87','如果这都不算爱'],
['153.92','我有什么好悲哀'],
['157.91','谢谢你的慷慨'],
['160.76','是我自己活该 OH'],
['166.08','如果这都不算爱'],
['170.08','我有什么好悲哀'],
['174.11','你要的是崇拜'],
['177.02','并不是谁的爱 OH '],
['182.46','如果这都不算爱'],
['186.37','我有什么好悲哀'],
['190.43','谢谢你的慷慨'],
['193.32','是我自己活该 OH'],
['198.66','如果这都不算爱'],
['202.70','我有什么好悲哀'],
['206.73','你要的是崇拜'],
['209.75','并不是谁的爱 OH '],
['216.64','EN~'],
['220.64','感谢欣赏 2022.6.9']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
meter.value = prog;
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = '#E6BD1A';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
lrcWrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 马黑黑 发表于 2022-6-9 21:52
我很奇怪：菇凉咋的没湿身
她跟雨水不再同一个空间层，所以不怕不怕了{:4_173:} 歌词的字幕真有意思。 红影好快的速度。制作漂亮！赞！{:4_199:} 亲爱的，越做越熟练了，越做越漂亮了。
付出总有回报，辛苦的学习，换回来就就是这个丰收的成果。太棒啦{:4_178:} 看点多多的唯美画面，影儿也是棒棒哒。很担心那雪白的裙子被雨水弄脏了……{:4_205:} 溅起的雨滴好看 我很奇怪：菇凉咋的没湿身{:4_170:} 梦油 发表于 2022-6-9 15:31
歌词的字幕真有意思。
是黑黑的代码，我只是套用{:4_173:} 加林森 发表于 2022-6-9 16:55
红影好快的速度。制作漂亮！赞！
谢谢队长鼓励，只是想着把视频引进来，就试验了一下{:4_173:} 小辣椒 发表于 2022-6-9 17:57
亲爱的，越做越熟练了，越做越漂亮了。
付出总有回报，辛苦的学习，换回来就就是这个丰收的成果。太棒啦 ...
找了个无声视频，其他元素都是后加的。结果上瘾了，顺手找了好多个无声视频，都留起来了{:4_173:} 千羽 发表于 2022-6-9 20:12
看点多多的唯美画面，影儿也是棒棒哒。很担心那雪白的裙子被雨水弄脏了……
哈哈，羽儿真是善良{:4_173:} 顾-念 发表于 2022-6-9 20:13
溅起的雨滴好看
那是一段视频，被我用做底板了{:4_173:} 红影 发表于 2022-6-9 21:58
她跟雨水不再同一个空间层，所以不怕不怕了
原来有隔离 红影 发表于 2022-6-9 21:55
谢谢队长鼓励，只是想着把视频引进来，就试验了一下
挺好的啊。漂亮哦！还用了动图，真好！这个姑娘不怕水的啊？{:4_189:} 红影 发表于 2022-6-9 21:56
找了个无声视频，其他元素都是后加的。结果上瘾了，顺手找了好多个无声视频，都留起来了
无声视频上次我给你软件过的啊 马黑黑 发表于 2022-6-9 21:59
原来有隔离
平行空间。对了，我给姑娘手里放了一朵花，否则太空了{:4_173:} 红影 发表于 2022-6-9 23:03
平行空间。对了，我给姑娘手里放了一朵花，否则太空了
空手道也没什么不好 加林森 发表于 2022-6-9 22:06
挺好的啊。漂亮哦！还用了动图，真好！这个姑娘不怕水的啊？
姑娘说了，反正皮肤不透水的{:4_173:}