《大雾》- 未知音素 / 张一乔 TO：红影
本帖最后由 加林森 于 2022-6-14 18:39 编辑 <br /><br /><style>.mama { position: relative; left: -302.5px; width: 1201px; height: 657px; background: tan url('https://pic.imgdb.cn/item/62a81db709475431290edb5a.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid { position: absolute; width: 1345px; height: 799px; object-fit: cover; opacity: .3; }
.lrcWrap { position: absolute; top: 10px; left: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
.playbtn:hover { background: red; }
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
.pausebtn:hover { border-color: transparent red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.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="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb96f484078.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>大雾 - 未知音素/张一乔</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1805088448.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0; //误差修正
let lrcAr = [
['1.84','大雾'],
['4.22','歌手：未知音素 / 张一乔'],
['6.28','作词 : 唐棣'],
['7.26','作曲 : 浅逸'],
['8.51','编曲 : 徐深'],
['9.94','lrc制作 : 加林森'],
['21.10','我喜欢你却不想让你 知道'],
['27.07','一个人偷偷盖了一座 城堡'],
['34.16','看着你微笑 跟着你奔跑'],
['43.97','这份喜欢 希望不是一种打扰'],
['50.05','这天又下起了大雨 起了雾'],
['57.11','我又没找到方向 迷了路'],
['61.42','我又怎么好'],
['65.75','能触碰你温度'],
['68.35','大雾四起 偷偷藏匿'],
['72.25','我在无人处爱你'],
['76.11','大雾散去 人尽皆知我爱你'],
['81.38','穿过风雨 小心翼翼'],
['88.56','害怕惊扰你'],
['92.29','你是否也能 感受我呼吸'],
['99.53','大雾四起 看不见你'],
['105.07','却能找到你眼睛'],
['109.15','大雾散去 我在人群中爱你'],
['115.40','跨越千里 苦苦寻觅'],
['121.28','终于找到你'],
['124.69','每一步都是爱的足迹']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
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 = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
aud.paused ? btnstate(1) : btnstate(0);
</script>
@红影 醉美水芙蓉 发表于 2022-6-14 16:58
欣赏队长佳作！
谢谢水芙蓉！ 仙气十足啊，会不会把影给吓着了啊{:4_189:} 绿叶清舟 发表于 2022-6-14 17:59
仙气十足啊，会不会把影给吓着了啊
这个没有你那个吓人吧。{:4_170:} 朦胧的森林，水面变得黯然飘渺，有了一丝静谧与安详。好美啊！ 原来这里还有个礼物，今天天开心了，忙乎一天，上来却有这么多礼物{:4_173:} 这个雾气的视频不光在山峰好看，原来在水上也很惊艳，这个制作太美了{:4_187:} 谢谢队长，这个制作效果特别好，真美啊{:4_199:} 梦油 发表于 2022-6-14 20:13
朦胧的森林，水面变得黯然飘渺，有了一丝静谧与安详。好美啊！
谢谢老梦的点评！ 红影 发表于 2022-6-14 20:35
原来这里还有个礼物，今天天开心了，忙乎一天，上来却有这么多礼物
红影收礼开森！{:4_204:} 红影 发表于 2022-6-14 20:36
这个雾气的视频不光在山峰好看，原来在水上也很惊艳，这个制作太美了
你喜欢就好。我试了三个背景，感觉这个挺好看的就制作出来送你了。 红影 发表于 2022-6-14 20:36
谢谢队长，这个制作效果特别好，真美啊
不客气的。喜欢就好！ 队长做图的技艺越发高深了。很美的制作，犹如仙境，很美{:4_187:} 千羽 发表于 2022-6-14 21:22
队长做图的技艺越发高深了。很美的制作，犹如仙境，很美
好看吧。背景不同都是飘逸是云都是一样的。 加林森 发表于 2022-6-14 21:26
好看吧。背景不同都是飘逸是云都是一样的。
嗯，很美{:4_187:} 千羽 发表于 2022-6-14 21:27
嗯，很美
另外一个更加漂亮。就是萨顶顶的。 加林森 发表于 2022-6-14 21:30
另外一个更加漂亮。就是萨顶顶的。
没找到，再找{:4_181:} 加林森 发表于 2022-6-14 18:08
这个没有你那个吓人吧。
必须的了{:4_189:}
页:
[1]
2