就是，以后制作帖子就找老黑的教程来看就搞定了。
是的，还有好多效果可以试着做一下帖子呢、 本帖最后由 加林森 于 2022-6-9 13:21 编辑 <br /><br />红影 发表于 2022-3-27 22:48
是的，还有好多效果可以试着做一下帖子呢、
就是，我今晚一直在看老黑的教程呢。
<style>
.mama { left: -70px; width: 900px; height: 640px; background: #eee url('https://pic.imgdb.cn/item/62a15b9a0947543129223c3d.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/90739.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['00:01.70','轻夜留声-侃侃'],
['00:04.03','词/编：大津'],
['00:05.57','曲：张薇'],
['00:08.27','留声机的歌都已沙哑'],
['00:26.90','眼泪在红酒杯口轻洒'],
['00:30.89','倒不开昼与夜的时差'],
['00:36.40','想靠近却又轻轻挣扎'],
['00:42.16','是谁留在信箱里的花'],
['00:46.64','是谁留在寂寞的牵挂'],
['00:50.82','回忆很美很纯洁无暇'],
['00:56.33','如心底那易碎的童话'],
['01:01.34','或许只能说声再会吧'],
['01:06.18','留你在梦里自由挥洒'],
['01:11.46','来或去悲或喜尽量优雅'],
['01:17.11','只是你的笑还割舍不下'],
['01:22.25','或许还是做个朋友吧'],
['01:27.03','还能有勇气拥抱一下'],
['01:32.16','思念像春天枝头的新芽'],
['01:37.08','幼稚可是却坚强的抒发'],
['02:03.16','留声机的歌都已沙哑'],
['02:09.88','眼泪在红酒杯口轻洒'],
['02:14.54','倒不开昼与夜的时差'],
['02:18.98','想靠近却又轻轻挣扎'],
['02:24.06','是谁留在信箱里的花'],
['02:29.55','是谁留在寂寞的牵挂'],
['02:33.67','回忆很美很纯洁无暇'],
['02:38.91','如心底那易碎的童话'],
['02:43.57','或许只能说声再会吧'],
['02:48.70','留你在梦里自由挥洒'],
['02:53.92','来或去悲或喜尽量优雅'],
['02:59.63','只是你的笑还割舍不下'],
['03:03.72','或许还是做个朋友吧'],
['03:08.89','还能有勇气拥抱一下'],
['03:14.10','思念像春天枝头的新芽'],
['03:19.23','幼稚可是却坚强的抒发'],
['03:24.64','或许只能说声再会吧'],
['03:28.75','留你在梦里自由挥洒'],
',
['03:39.36','只是你的笑还割舍不下'],
['03:43.89','或许还是做个朋友吧'],
['03:48.94','还能有勇气拥抱一下'],
['03:54.07','思念像春天枝头的新芽'],
['03:58.98','幼稚可是却坚强的抒发'],
['04:24.06','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>
加林森 发表于 2022-3-27 23:08
就是，我今晚一直在看老黑的教程呢。
我没事也经常会去看的。 红影 发表于 2022-3-28 11:07
我没事也经常会去看的。
就是，主要是要领悟他写的教程哦。 加林森 发表于 2022-3-28 11:27
就是，主要是要领悟他写的教程哦。
怪不得清舟小九他们说，以前就有黑黑带着你们玩，黑黑的这些东西太棒了。 红影 发表于 2022-3-28 16:20
怪不得清舟小九他们说，以前就有黑黑带着你们玩，黑黑的这些东西太棒了。
是的，我们跟着他玩的。那个时候我喜欢帖图片的，就玩这个了。{:4_189:} 加林森 发表于 2022-3-28 16:27
是的，我们跟着他玩的。那个时候我喜欢帖图片的，就玩这个了。
那个时候肯定很欢乐，和现在一样，跟着黑黑玩真的很有趣{:4_173:} 红影 发表于 2022-3-28 16:55
那个时候肯定很欢乐，和现在一样，跟着黑黑玩真的很有趣
是的啊，他那个时候就在动脑筋了，不像我，只知道傻玩。{:4_189:} 加林森 发表于 2022-3-28 17:13
是的啊，他那个时候就在动脑筋了，不像我，只知道傻玩。
队长学了那么长时间，基础有了。 红影 发表于 2022-3-28 19:20
队长学了那么长时间，基础有了。
嗯嗯，有点的。不多。 加林森 发表于 2022-3-28 19:21
嗯嗯，有点的。不多。
谦虚，学过了总会好很多的{:4_204:} 红影 发表于 2022-3-28 21:09
谦虚，学过了总会好很多的
是的，总会有点记忆的。 加林森 发表于 2022-3-28 21:13
是的，总会有点记忆的。
再拾起来也更方便些。 红影 发表于 2022-3-28 22:29
再拾起来也更方便些。
是的是的
页:
1
[2]