《写代码》（学习黑黑歌词同步）
<style>.outerbox {
position: relative;
left: -302px;
top:120px;
width: 1200px;
height: 675px;
overflow: hidden;
}
.shipin {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.tupian {
position: absolute;
width: 400px;
height: 277px;
object-fit: cover;
position: absolute;
right:0px;
top: 0px;
-webkit-clip-path: polygon(0 42%, 35% 0, 100% 0, 100% 68%, 84% 100%, 59% 100%, 50% 90%, 43.5% 100%, 22.5% 100%, 27% 62%, 25% 58%, 6% 72%, 0 64%);
}
.lrcWrap { position: absolute; left: 320px; top: 160px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(0,128,128,.6) linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 0px 0px 8px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: #3CC457; 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: #3CC457; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #22DD22; font: normal 1.3em 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; }
.renwu { position: absolute; width: 240px; height: 240px; background: url('https://pic.imgdb.cn/item/62a3ffab0947543129322900.gif'); animation: cloud_fly 40s infinite alternate; }
@keyframes cloud_fly { from { top: 400px; left: 0px;} to { top: 400px; left: 900px; } }
</style>
<div class="outerbox">
<video class="shipin" src="https://img.tukuppt.com/video_show/2422006/00/01/73/5b4996943c830.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div class="renwu"></div>
<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 class="tupian">
<img alt="" src="https://pic.imgdb.cn/item/62a3f3d00947543129250ec9.gif"/></div>
<div style="position: absolute; left:10px; top: 10px; width:240px;opacity: .25;">
<img alt="" src="https://pic.imgdb.cn/item/62a3fb8009475431292d7815.gif"/></div>
</div><br><br><br><br><br><br>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1481549925.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.15;
let lrcAr = [
['0.08','《写代码》阿怪怪'],
['4.05','演唱及作词：阿怪怪'],
['8.05','献给苦恼的程序设计师'],
['11.95','我在写代码欸'],
['14.85','我在机场都要写代码欸欸欸'],
['17.77','我在写代码欸'],
['20.69','我在车上都要写代码欸欸欸'],
['23.59','我在写代码欸'],
['26.63','我在吃饭都要写代码欸欸欸'],
['29.52','我在写代码欸'],
['32.46','但你们学不会 但你们学不会欸'],
['35.42','产品经理告诉我要做完这些需求'],
['38.24','想拖延 只能舔 场景都特别的经典'],
['41.14','可是他们会用各种话术把我都给绕晕'],
['44.11','从8天 到5天 我只能求他轻点'],
['47.00','我说按时搞定需求对我来说真的好难'],
['49.95','他说事情不难要你干嘛欺骗我这个少男'],
['52.96','我知道继续BATTLE下去只会给自己找烦'],
['55.94','只能忍气吞声来保住我们友谊的小船'],
['58.83','熬夜 现在又是六点半'],
['61.68','逃却 这样肯定搞不完 ei'],
['64.85','缴械 但是这样不太man ei'],
['67.85','为什么前人代码堆得总是像屎山欸'],
['70.79','你说这次上线很稳应该不会出问题'],
['73.80','不停预发打回过后还要骂我臭笨驴'],
['76.93','终于上线成功团建庆祝感觉很无敌'],
['79.77','结果流量一来发现事故全都是P级'],
['82.74','workflow 自信回头 我的算法总是比你的6'],
['85.54','不停踢球 只会加油 一个人完成一整场秀'],
['88.35','找bug的过程就像蒙着眼睛在打地鼠'],
['91.56','这么努力只是为了年底能够375'],
['94.43','熬夜 现在又是六点半'],
['97.46','逃却 这样肯定搞不完 ei'],
['100.23','缴械 但是这样不太man ei'],
['103.19','为什么前人代码堆得总是像屎山欸'],
['106.09','我在写代码欸'],
['109.13','我在机场都要写代码欸欸欸'],
['111.99','我在写代码欸'],
['115.04','我在车上都要写代码欸欸欸'],
['117.80','我在写代码欸'],
['120.84','我在吃饭都要写代码欸欸欸'],
['123.74','我在写代码欸'],
['126.62','但你们学不会 但你们学不会欸'],
['129.68','系统内存总是不够 数据库会被打爆'],
['132.85','指针资源总是泄露 经验还是不够老道'],
['135.83','没有转义输入注入请求随意就能构造'],
['138.70','原来我只是多加了那一对标点符号'],
['141.52','ah，你们说的好像有点奇怪'],
['144.35','ah，系统架构我还没搞明白'],
['147.22','ah，为什么难为我这个天才'],
['150.21','现在，我只想边码边吃炫迈'],
['153.84','喂，最近在干什么，来DOTA呀，4黑就差你一个'],
['157.71','没空呀，最近有事'],
['160.45','来呀来呀，你到底在干什么呀，微信qq都不回'],
['163.71','我在。。。我在。。。'],
['165.06','我在写代码欸'],
['167.89','我在机场都要写代码欸欸欸'],
['170.88','我在写代码欸'],
['173.70','我在车上都要写代码欸欸欸'],
['176.62','我在写代码欸'],
['179.86','我在吃饭都要写代码欸欸欸'],
['182.53','我在写代码欸'],
['185.50','但你们学不会 但你们学不会欸']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type: none" 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_173:} 岩新新 发表于 2022-6-11 12:17
分享精彩制作！
谢谢新新鼓励{:4_187:} 用一张敲键盘的动图，把那个文字给遮住了。跟黑黑的蓝太阳的功能一样的{:4_173:} 红影 发表于 2022-6-11 12:21
用一张敲键盘的动图，把那个文字给遮住了。跟黑黑的蓝太阳的功能一样的
亲爱的，聪明，这个广告被巧妙的遮住了{:4_178:} 这个视频也是和黑黑特别吻合 小辣椒 发表于 2022-6-11 13:14
亲爱的，聪明，这个广告被巧妙的遮住了
我把这个敲键盘动图裁剪了一下，省得遮挡太多屏幕。发现黑黑讲的那个裁剪也特别好，很多地方能用上。
以后就不需要动图抠图了，之前去抠图好累的{:4_173:} 小辣椒 发表于 2022-6-11 13:14
这个视频也是和黑黑特别吻合
是啊，觉得挺适合黑黑。看到这个视屏，去找歌曲，没想到居然有《写代码》的歌呢{:4_173:} 先说一下，写代码的人一般都不说方言 {:5_106:} 红影 发表于 2022-6-11 12:18
这个歌词很有意思，虽然写代码很苦恼，但其他人都学不会。太有道理了。黑黑是不是这样啊@马黑黑
歌词挺有意思的 整个画面全在动，真有意思。 好创意，制作得真漂亮，满屏都是滑动的代码。厉害啊！{:4_199:} 红影 发表于 2022-6-11 13:56
我把这个敲键盘动图裁剪了一下，省得遮挡太多屏幕。发现黑黑讲的那个裁剪也特别好，很多地方能用上。
以 ...
我都不晓得有动图裁剪这个功能{:4_201:} 红影 发表于 2022-6-11 13:57
是啊，觉得挺适合黑黑。看到这个视屏，去找歌曲，没想到居然有《写代码》的歌呢
所以这个帖送黑黑很完美 红影 发表于 2022-6-11 12:21
用一张敲键盘的动图，把那个文字给遮住了。跟黑黑的蓝太阳的功能一样的
你这是巧妙的设计，非常符合题意 小辣椒 发表于 2022-6-11 16:54
所以这个帖送黑黑很完美
{:5_106:} 这个必须夸 {:4_199:}