颠倒世界（学习黑黑歌词同步和倒影效果）
<style>#papa { left: -302px; width: 1200px; height: 675px; background: #ccc url('https://pic1.imgdb.cn/item/6335a5ce16f2c2beb1999159.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; left: 600px; width: 300px; height: 80px; 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, rgba(200,0,0,.75), rgba(0,255,20,.45)); border-radius: 50%; opacity: 1; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); 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, rgba(0,255,20,.45), rgba(255,0,0,.5) 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; }
#lrc { position: absolute; left: 580px; top: 310px; font: bold 2.4em sans-serif; color: rgba(160,82,45,.95); text-shadow: 1px 1px 0px #fff; --motion: cover2; --tt: 5s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(210,105,30,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#tree { position: absolute; left: 20px; width: 300px; height: 144px; mix-blend-mode: multiply; }
#bird { position: absolute; left: 400px; top: 360px; width: 121px; height: 55px; background: transparent url('https://pic1.imgdb.cn/item/63346e7716f2c2beb18bec2f.gif') no-repeat; }
#bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; top:-180%; filter: blur(2px); transform:scaleY(-1); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img id="tree" src="https://pic1.imgdb.cn/item/63346ddd16f2c2beb18b428b.gif" alt="" />
<div id="bird"></div>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</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 = 'https://music.163.com/song/media/outer/url?id=1908797589.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, rgba(0,255,20,.45), rgba(255,0,0,.5) ' + aud.currentTime / aud.duration * 100 + '%, rgba(255,255,255,.35) 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', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');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 time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
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:} 歌曲的曲调挺好听。那飞奔的是狼吗？ 有部电影，我不记得叫啥了，也没看过，它就是发生在一个可以选择颠倒生活方式的，包括走路，可以正常走，也可以头朝下走 亲爱的，你这个效果也是棒棒的{:4_178:} 梦油 发表于 2022-9-30 16:02
歌曲的曲调挺好听。那飞奔的是狼吗？
不知道，只是找个动图做反射玩{:4_173:} 歌词效果真美。同步做的非常好{:4_199:} 马黑黑 发表于 2022-9-30 18:17
有部电影，我不记得叫啥了，也没看过，它就是发生在一个可以选择颠倒生活方式的，包括走路，可以正常走，也 ...
我好像也看过，也想不起来名字了{:4_173:} 这首歌第一次听到{:4_208:} 很有个性的帖子{:4_199:} 红影 发表于 2022-9-30 20:28
我好像也看过，也想不起来名字了
其实不好看，不合逻辑 新颖的帖子，欣赏！{:4_199:} 小辣椒 发表于 2022-9-30 20:27
亲爱的，你这个效果也是棒棒的
谢谢亲爱的，去找了个上下都有城市的图图，有点乱，把上半部虚化了，还是觉得有点乱{:4_173:} 小辣椒 发表于 2022-9-30 20:29
这首歌第一次听到
这歌曲有点怪怪的，我也是第一次听{:4_173:} 小九 发表于 2022-9-30 20:29
很有个性的帖子
图图有点怪，歌曲也有点怪，不是个性，应该是有点怪才对{:4_173:} 马黑黑 发表于 2022-9-30 20:33
其实不好看，不合逻辑
看得太久了，都有点忘记是不是好看了{:4_173:} 相约爱晚亭 发表于 2022-9-30 20:35
新颖的帖子，欣赏！
谢谢爱晚亭鼓励，国庆快乐{:4_187:} 红影 发表于 2022-9-30 21:10
看得太久了，都有点忘记是不是好看了
没关系 马黑黑 发表于 2022-9-30 21:18
没关系
这个反射，我放大原图，好像得出的效果不一样了。 红影 发表于 2022-9-30 21:52
这个反射，我放大原图，好像得出的效果不一样了。
总会有所不同的