《春分》- 音阙诗听王梓钰 （根据老黑歌词显示板毛玻璃效果制作)
本帖最后由 加林森 于 2022-6-7 16:26 编辑 <br /><br /><style>.mama { left: -302px; width: 1200px; height: 900px; background: #eee url('https://pic.imgdb.cn/item/629ec3c809475431293f88cc.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.meter { position: absolute; left: -30px; top: 58px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
.stone { position: absolute; top: 100px; right: 50px; width: 150px; height: 150px; background-color: rgba(255,255,255,.35); background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65)); border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;box-shadow: inset 10px 10px 10px rgba(0,0,0,.05), 15px 25px 10px rgba(0,0,0,.1), 15px 20px 20px rgba(0,0,0,.05), inset -10px -10px 15px rgba(255,255,255,.9); }
#lrcDiv_outer { position: absolute; left: 40px; top: 40px; width: fit-content; height: fit-content;padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #2E63A5; border-radius: 6px; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://www.joy127.com/url/14218.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:01.15','春分-王梓钰(音阙诗听)'],
['00:03.38','填词：假寐'],
['00:05.48','编曲：Morri3on（乔凡三）'],
['00:10.27','折柳枝沾过酒樽'],
['00:19.40','青梅色点润双唇'],
['00:24.73','昼对夜留情一吻'],
['00:27.93','难舍 难分'],
['00:32.36','醉枕未干的诗文'],
['00:36.28','细雪融雨偷入门'],
['00:39.90','挑帘惺忪望花池'],
['00:42.78','春意 深深'],
['00:46.70','困于朝朝暮暮 的心神'],
['00:51.12','染红白衣 的黄昏'],
['00:54.64','谁焚书稿 立花坟'],
['00:58.66','祭多情人'],
['01:51.12','玄鸟纸鸢齐留云'],
['01:54.94','杯中浊茶有余温'],
['01:58.46','锦鲤初醒跃龙门'],
['02:01.57','误闯 香阵'],
['02:06.10','辛夷为题画扇身'],
['02:09.91','赠予落魄相思臣'],
['02:13.66','爱恨怎能甘俯首'],
['02:16.50','滚滚 红尘'],
['02:20.51','困于朝朝暮暮 的心神'],
['02:24.56','染红白衣 的黄昏'],
['02:28.42','谁焚书稿 立花坟'],
['02:32.17','祭多情人'],
['03:04.78','LRC编制：加林森']
];
let toSec = (lrcTime) => {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
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){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑 歌曲好听，队长做得真快{:4_204:} 红影 发表于 2022-6-7 10:50
歌曲好听，队长做得真快
我告诉老黑了的，今天来制作。 醉美水芙蓉 发表于 2022-6-7 11:30
欣赏队长佳作！
谢谢水芙蓉支持！{:4_190:} 美美哒 马黑黑 发表于 2022-6-7 12:12
美美哒
谢谢老黑！开喝没有啊？{:4_191:} 队长制作的音乐画面总是那么美，这歌律动感很舒适。 上海朝阳 发表于 2022-6-7 12:41
队长制作的音乐画面总是那么美，这歌律动感很舒适。
谢谢支持哦！ 加林森 发表于 2022-6-7 10:53
我告诉老黑了的，今天来制作。
队长好像换了个图片呢{:4_204:} 红影 发表于 2022-6-7 12:51
队长好像换了个图片呢
是啊，我准备三张图片的，在试毛玻璃的效果怎么样的，它可以改变的，根据图片来改变的。 加林森 发表于 2022-6-7 12:54
是啊，我准备三张图片的，在试毛玻璃的效果怎么样的，它可以改变的，根据图片来改变的。
毛玻璃最好放在比较清爽的位置上，这张图图毛玻璃的位置有点乱。 红影 发表于 2022-6-7 13:09
毛玻璃最好放在比较清爽的位置上，这张图图毛玻璃的位置有点乱。
这个是在播放架上的了。 嗯，毛玻璃效果很好地表现出来啦。 梦油 发表于 2022-6-7 16:58
嗯，毛玻璃效果很好地表现出来啦。
是的。 加林森 发表于 2022-6-7 18:07
是的。
你真聪明。 梦油 发表于 2022-6-7 20:05
你真聪明。
我是有样就学习。 队长这个图图高度好像有点高，毛玻璃位置直接拉最下面画面试一下，连按钮一起下来 小辣椒 发表于 2022-6-7 22:20
队长这个图图高度好像有点高，毛玻璃位置直接拉最下面画面试一下，连按钮一起下来
嗯嗯，明天来调。
页:
[1]
2