愿你被世界温柔以待（学习黑黑叠加法歌词）
<style>
#papa { left: -302px; width: 1200px; height: 640px; background: gray url('https://pic1.imgdb.cn/item/6331519716f2c2beb197016b.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; right: 40px; bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, Yellow, orange); border-radius: 50%; opacity: .55; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, Yellow 100%, transparent 0); border: 1px solid teal; font: normal 14px / 16px sans-serif; color: #ccc; text-shadow: 1px 1px 1px #000; opacity: .65; }
#lrcwrap { position: absolute; top: 20px; font: bold 3em 'KaiTi',sans-serif; }
#lrc1, #lrc2 { width: 100%; height: 100%; color: #FFF0F5; white-space: nowrap;filter:drop-shadow(0px 0px 5px rgba(255,192,203,0.95));}
#lrc2 { position: absolute; top: 0; left: 0; color: #FFFF00; overflow: hidden; filter:drop-shadow(0px 0px 5px rgba(210,105,30,0.95)); }
.vid { position: absolute;LEFT: 230px; top:200px; width: 720px; height: 420px; object-fit: cover; opacity: .9; clip-path: ellipse(360px 200px at 50% 48%) ;mix-blend-mode:normal;}
@keyframes mov1 { from { width: 0%;} to { width: 100%; } }
@keyframes mov2 { from { width: 0%;} to { width: 100%; } }
</style>
<div id="papa" data-lr="no">
<video class="vid"src="https://img.tukuppt.com/video_show/2629112/00/01/67/5b48003688339.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="mpic" alt="" src="/data/attachment/forum/202209/25/072652ckuqwlat7wqk6o6z.gif" />
<div id="lrcwrap">
<span id="lrc1">花潮lrc在线</span>
<span id="lrc2">花潮lrc在线</span>
</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/09/25/3a97ec13d39ed0f2a8a396134389c2de.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg, orange, Yellow ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc2.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc2.style.animationPlayState = 'running');
let showLrc = (time) => {
lrc2.style.animation = (mFlag ? 'mov1 ' : 'mov2 ') + time + 's linear forwards';
lrc1.innerHTML = lrc2.innerHTML = lrcAr;
mKey += 1;
mFlag = !mFlag;
}
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
};
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
</script> 黑黑怕老鼠，包括仓鼠、小白鼠，不知道怕不怕小松鼠 @马黑黑{:4_173:} 红影 发表于 2022-9-26 19:36
黑黑怕老鼠，包括仓鼠、小白鼠，不知道怕不怕小松鼠 @马黑黑
鼠辈的都怕 这只松鼠会享受{:4_170:} 马黑黑 发表于 2022-9-26 19:42
鼠辈的都怕
它们通常都不大，你这么大的块头居然怕那么小的存在{:4_173:} 马黑黑 发表于 2022-9-26 19:42
这只松鼠会享受
整片森林都是它的{:4_173:} 红影 发表于 2022-9-26 20:06
整片森林都是它的
奢华的生活，从做一只松鼠开始吧 红影 发表于 2022-9-26 20:05
它们通常都不大，你这么大的块头居然怕那么小的存在
脏 亲爱的，这个视频配的漂亮的{:4_199:} 第一次听倒这首歌 地球上的物种、生命注定是弱肉强食，这小生命不可能得到善待。 制作真漂亮！红影好创意，好听好看，真棒！问好！
{:4_204:}{:4_199:} 亲爱的，这个制作特别的棒，视频还是椭圆形的{:4_199:} 好可爱的松鼠。这个视频真好，背景也挺好。赞！{:4_199:} 马黑黑 发表于 2022-9-26 20:19
奢华的生活，从做一只松鼠开始吧
是啊，只要没人打扰，就是最美好的无拘无束的日子。 马黑黑 发表于 2022-9-26 19:42
鼠辈的都怕
哈哈，俺不怕{:4_205:} 马黑黑 发表于 2022-9-26 20:19
脏
把它们从小养在干净的环境里，就好了呀{:4_173:} 小辣椒 发表于 2022-9-26 20:37
亲爱的，这个视频配的漂亮的
反倒这个视屏，觉得特别可爱，就拿来做帖子了{:4_173:} 小辣椒 发表于 2022-9-26 20:38
第一次听倒这首歌
歌名很喜欢，一份温柔的情怀{:4_204:} 好可爱的小松鼠，伸手可及的感觉{:4_187:}