笔落
本帖最后由 醉美水芙蓉 于 2022-6-20 21:02 编辑 <br /><br /><style>/* 帖子外层 */
.outer { left: -214px; width: 1024px; height: 600px; background: #ccc url('https://img-baofun.zhhainiao.com/fs/7d2509ab465a738161b4013c7c12571c.jpg') no-repeat center / cover; overflow: hidden; position: relative; }
/* 视频 */
.vid { position: absolute; top: -54px; width: 1024px; height: 655px; object-fit: cover; opacity: .25; }
/* 频谱+进度外层 */
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; 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(20px, 20px); font: bold 1.2em / 1.5em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; position: absolute; }
/* 频谱顶帽动画 */
@keyframes up { from { top: -6px; } to { top: -16px; } }
</style>
<div class="outer">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/454cb805fc0fbc3ff83eee27992cbffa_preview.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://www.qqmc.com/up/kwlink.php?id=221251392&.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 = [
['0.28','零一九零贰 - 笔落 (DJ阿卓版)'],
['0.86','作词：1020'],
['1.04','作曲：1020'],
['1.22','编曲：DJ阿卓'],
['1.49','制作人：一寸光年团队'],
['1.94','监制：西西'],
['2.17','制作公司、OP：一寸光年'],
['2.66','LRC编辑：醉美水芙蓉'],
['4.16','那年炽热的温度'],
['6.23','变成多年的赌注'],
['8.30','最后留我一人输掉了全部'],
['12.49','笔落画下了伤处'],
['14.57','怪我识错了领悟'],
['16.64','这一笔你我形同陌路'],
['20.85','是谁停了脚步'],
['22.92','狂热降低了温度'],
['24.97','本以为是永恒却化成结束'],
['29.25','冰封的心太坚固'],
['31.23','寒风凝结了泪珠'],
['33.33','接受了你给予的痛苦'],
['37.55','这一路的回顾'],
['39.58','也没有那么辛苦'],
['41.67','只是不小心的付出了全部'],
['62.60','了却过往被封存'],
['64.64','匆匆岁月一转身'],
['66.83','墨痕干的足迹泪流下'],
['69.25','思念的伤痕'],
['70.98','落笔下眷恋几分'],
['72.98','半生不解的情深'],
['75.15','或不该在当年留下了认真'],
['79.28','落笔处相思故'],
['81.30','进退爱恨的城府'],
['83.44','写不尽的是我对你的投入'],
['87.55','那年炽热的温度'],
['89.69','变成多年的赌注'],
['91.84','最后留我一人输掉了全部'],
['95.95','笔落画下了伤处'],
['98.01','怪我识错了领悟'],
['100.13','这一笔你我形同陌路'],
['104.24','是谁停了脚步'],
['106.41','狂热降低了温度'],
['108.49','本以为是永恒却化成结束'],
['112.64','冰封的心太坚固'],
['114.71','寒风凝结了泪珠'],
['116.85','接受了你给予的痛苦'],
['120.96','这一路的回顾'],
['123.07','也没有那么辛苦'],
['125.23','只是不小心的付出了全部'],
['129.33','笔落画下了伤处'],
['131.45','怪我识错了领悟'],
['133.52','这一笔你我形同陌路'],
['137.69','是谁停了脚步'],
['139.78','狂热降低了温度'],
['141.89','本以为是永恒却化成结束'],
['146.13','冰封的心太坚固'],
['148.13','寒风凝结了泪珠'],
['150.18','接受了你给予的痛苦'],
['154.37','这一路的回顾'],
['156.44','也没有那么辛苦'],
['158.52','只是不小心的付出了全部'],
['165.28','谢谢欣赏！']
];
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>
半透明的魔幻摇滚。真好看{:4_204:} 制作漂亮，贴子歪了啊 樵歌 发表于 2022-6-20 21:02
半透明的魔幻摇滚。真好看
樵歌晚上好！祝欣赏愉快！ 绿叶清舟 发表于 2022-6-20 21:02
制作漂亮，贴子歪了啊
清舟美女晚上好！祝欣赏愉快！ 醉美水芙蓉 发表于 2022-6-20 21:03
清舟美女晚上好！祝欣赏愉快！
谢谢芙蓉晚上好 这舞跳的够劲，估计我跟不上，再说我也不习惯这么穿{:5_106:} 水芙蓉这个背景mp4加的漂亮，其实这些是你的特长呢，放开玩，祝玩的开心。 有点晕呢！ 这个构思奇特，很漂亮的制作，给水芙蓉点赞{:4_187:} 马黑黑 发表于 2022-6-20 22:03
这舞跳的够劲，估计我跟不上，再说我也不习惯这么穿
谢谢黑黑老师欣赏支持！ 小辣椒 发表于 2022-6-20 22:18
水芙蓉这个背景mp4加的漂亮，其实这些是你的特长呢，放开玩，祝玩的开心。
大家一起开心玩！ 加林森 发表于 2022-6-20 22:22
有点晕呢！
队长早上好！ 红影 发表于 2022-6-20 23:04
这个构思奇特，很漂亮的制作，给水芙蓉点赞
红影美女早上好！ 醉美水芙蓉 发表于 2022-6-21 06:41
队长早上好！
早晨好！ 醉美水芙蓉 发表于 2022-6-21 06:39
谢谢黑黑老师欣赏支持！
早啊 醉美水芙蓉 发表于 2022-6-21 06:42
红影美女早上好！
问好水芙蓉，抱抱{:4_179:}
页:
[1]