太阳可以是蓝色吗
本帖最后由 马黑黑 于 2022-6-11 09:24 编辑 <br /><br /><style>.mnBox { left: -214px; width: 1024px; height: 600px; position: relative; overflow: hidden; }
.mnBox::before { position: absolute; content: ''; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: blue; z-index: 100; }
.mnBox::after { position: absolute; content: ''; width: 100%; height: 100%; background: transparent; z-index: 101; }
.video { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.lrcWrap { position: absolute; padding: 20px; width: fit-content; height: fit-content; text-align: center; display: flex; flex-direction: column; z-index: 102;}
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: 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: olive; }
.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="mnBox">
<video class="video" src="https://img.tukuppt.com/video_show/2629112/00/02/01/5b4ef7fbb8069.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>太阳可以是蓝色吗</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1477576719.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0;
let lrcAr = [
['0.05','太阳可以是蓝色吗'],
['0.82','作词 : 赵依伦'],
['1.40','作曲 : 赵依伦'],
['1.94','编曲：潮池蓝'],
['2.94','演唱：潮池蓝'],
['23.58','Yes she had eyes like the moon'],
['28.51','And I know I’m not alone'],
['33.20','That feeling is so beautiful'],
['38.19','I am looking into my soul'],
['42.79','尽管珍惜 尽管小心'],
['47.24','还是偶尔有点感到无力'],
['52.38','尽情呼吸 尽情哭泣'],
['57.05','蓝色的光留下秘密'],
['80.89','抱紧我'],
['83.31','别放开我'],
['85.42','留我一个人看烟火'],
['90.52','没关系'],
['92.75','都是错'],
['94.78','请别要再假装失落'],
['99.97','抱紧我'],
['102.06','别放开我'],
['104.40','留我一个人看烟火'],
['109.37','没关系'],
['111.53','都是错'],
['113.76','请别要再假装失落'],
['130.75','Yes she had eyes like the moon'],
['135.22','And I know I am not alone'],
['140.23','That feeling is so beautiful'],
['145.15','I am looking into my soul'],
['149.85','尽管珍惜 尽管小心'],
['154.33','还是偶尔有点感到无力'],
['159.31','尽情呼吸 尽情哭泣'],
['163.88','蓝色的光留下秘密'],
['197.34','抱紧我'],
['199.45','别放开我'],
['201.77','留我一个人看烟火'],
['206.78','没关系'],
['209.10','都是错'],
['211.30','请别要再假装失落'],
['216.45','抱紧我'],
['218.61','别放开我'],
['220.69','留我一个人看烟火'],
['225.81','没关系'],
['228.13','都是错'],
['230.30','请别要再假装失落'],
['234.13','制作人：Hos'],
['234.99','鼓：Hos'],
['235.55','贝斯：Chris'],
['236.11','录音：江小妍'],
['237.03','混音：江小妍'],
['237.37','封面设计：Dooovy'],
['238.79','发行：讯飞音乐']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + 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', () => btn.value = '\u25BA');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '\u25BA');
function 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;
}
btn.value = aud.paused ? '\u25BA' : '||';
</script>
可以这么 蓝色梦幻的吗{:4_178:} 朵拉 发表于 2022-6-11 11:04
可以这么 蓝色梦幻的吗
没有什么不可以{:5_117:} 这个还有个蓝太阳，本来应该是蓝月亮的{:4_173:}
配首蓝月亮的歌 这个视频背景也是配的漂亮 这个太阳设计的位置太好了，那个广告字没有了 黑黑~~昨天下之前的那个我还要仔细看看，就是背景不一样，歌词同步的格式是一样的吧，我上来就是想看看昨天那个加进度条控制的。。。。。 小辣椒 发表于 2022-6-11 11:36
黑黑~~昨天下之前的那个我还要仔细看看，就是背景不一样，歌词同步的格式是一样的吧，我上来就是想看看昨天 ...
都是一样的歌词+播放控制，设置一下背景色，可以是透明的，也可以不是，可以要边框，也可以不要 马黑黑 发表于 2022-6-11 12:01
都是一样的歌词+播放控制，设置一下背景色，可以是透明的，也可以不是，可以要边框，也可以不要
好的，我在想做一个还是2个的问题{:4_173:} 不管太阳是什么颜色的，都能遮掉那个LOGO{:4_173:} 红影 发表于 2022-6-11 12:03
不管太阳是什么颜色的，都能遮掉那个LOGO
{:5_106:} 这个视屏选得真漂亮{:4_187:} 小辣椒 发表于 2022-6-11 12:02
好的，我在想做一个还是2个的问题
多多益善，但要遵守城管纪律{:5_106:} 红影 发表于 2022-6-11 12:04
这个视屏选得真漂亮
好像是有声音的 马黑黑 发表于 2022-6-11 12:04
多多益善，但要遵守城管纪律
午睡前做一个，然后再去睡 老黑厉害啊。真漂亮。{:4_199:} 马黑黑 发表于 2022-6-11 12:05
好像是有声音的
现在终于不用管是有声无声的了，想想就开心。那边那么多视频的呢，都可以用了{:4_173:} 红影 发表于 2022-6-11 13:54
现在终于不用管是有声无声的了，想想就开心。那边那么多视频的呢，都可以用了
没注册的好像不好找 加林森 发表于 2022-6-11 13:29
老黑厉害啊。真漂亮。
还行的吧 小辣椒 发表于 2022-6-11 13:22
午睡前做一个，然后再去睡
还是贪心{:5_117:}