嗯嗯，很多效果的确好
是的啊。
<style>
/* 帖子外层 */
.outer {
left: -214px;
width: 1024px;
height: 600px;
background:#ccc url /* 帖子背景 */ linear-gradient(to right top,black,#eee);
overflow: hidden;
position: relative;
}
/* 视频背景 */
.vid {
position: absolute;
top: -50px;
width: 100%;
height: 650px;
object-fit: cover;
}
/* 频谱+进度外层 */
.mama {
position: absolute;
left: 20px;
bottom: 40px;
width: fit-content;
height: fit-content;
cursor: pointer;
border-radius: 0 100%;
background: linear-gradient(transparent,green);
}
/* 频谱外层 */
.wrap {
width: 90px;
height: 60px;
box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
-webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
position: relative;
}
/* 进度显示器 */
.mama meter {
width: 90px;
position: relative;
}
/* 频谱 */
.wrap span {
width: 6px;
height: 60px;
bottom: -8px;
display: inline-block;
position: absolute;
}
/* 频谱伪元素 顶帽 */
.wrap span::before {
position: absolute;
content: '';
width: inherit;
height: 3px;
background: #eee;
top: -3px;
animation: up 1s ease-in infinite;
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(420px, 240px);
font: bold 1.2em / 2em sans-serif;
color: #fff;
text-shadow: 1px 1px 1px #000;
background: black linear-gradient(transparent,tan);
border-radius: 100% 0;
position: absolute;
}
/* 频谱顶帽动画 */
@keyframes up {
from { top: -6px; }
to { top: -16px; }
}
</style>
<div class="outer">
<video class="vid" src="https://img.tukuppt.com/video_show/3670116/00/02/03/5b4f40c2b2fa3.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=427016508.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
prog = (tt, cc) => 100 * cc / tt;
let lrcAr = [
['8.21','父亲节快乐 - 陈林波'],
['11.03','词：陈林波'],
['12.89','曲：陈林波'],
['20.63','父亲节快乐'],
['24.32','唱这首歌送给您'],
['28.72','身体健康快快乐乐'],
['33.21','无论我在哪里都祝福您'],
['40.31','你的爱是嘴角的微笑'],
['44.52','含而不露是你的本色'],
['48.97','像窗前的月光静默无语'],
['53.47','像你读过的历史历尽沧桑'],
['63.04','为了家你餐风露宿'],
['67.49','在外奔波换来了好日子'],
['71.79','如今儿女都已长大成人'],
['76.80','也该歇歇你的脚步'],
['80.47','享受人生'],
['86.30','父亲节快乐'],
['89.84','这首歌要送给您'],
['95.06','暖暖余辉温柔如您'],
['98.90','您的叮咛我们都会记得'],
['103.82','父亲节快乐'],
['108.06','唱这首歌送给您'],
['113.07','身体健康快快乐乐'],
['117.13','无论我在哪里都祝福您'],
['121.14','幸福平安'],
['167.12','为了家你餐风露宿'],
['171.17','在外奔波换来了好日子'],
['176.02','如今儿女都已长大成人'],
['180.46','也该歇歇你的脚步'],
['184.36','享受人生'],
['190.16','父亲节快乐'],
['194.16','这首歌要送给您'],
['198.57','暖暖余辉温柔如您'],
['203.05','您的叮咛我们都会记得'],
['208.53','父亲节快乐'],
['212.21','唱这首歌送给您'],
['216.68','身体健康快快乐乐'],
['221.30','无论我在哪里都祝福您'],
['225.37','幸福平安'],
['231.29','父亲节快乐'],
['234.85','这首歌要送给您'],
['239.84','暖暖余辉温柔如您'],
['243.89','您的叮咛我们都会记得'],
['248.97','父亲节快乐'],
['252.90','唱这首歌送给您'],
['258.06','身体健康快快乐乐'],
['261.85','无论我在哪里都祝福您'],
['265.92','幸福平安'],
['271.52','无论我在哪里都祝福您'],
['276.65','幸福平安']
];
Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
lrcbox.innerHTML = lrcAr;
}
}
})
</script>
页:
1
[2]