在最深的红尘与你重逢
本帖最后由 东篱闲人 于 2022-10-5 19:10 编辑 <br /><br /><style>#papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic1.imgdb.cn/item/633c165b16f2c2beb1116061.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; width: 1px; height: 1px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 650px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<img src="" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="在最深的红尘与你重逢">在最深的红尘与你重逢</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1899981562.mp3" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 作词 : 陈红卫',1000],
['1.00', ' 作曲 : 东浩',1000],
['2.00', ' 编曲 : 王小雨',1000],
['3.00', ' 图意: 东篱闲人',17850],
['20.85', '一定是前世未了的情',4029],
['24.88', '在心中留下太多感动',4640],
['29.52', '经过花开花谢春夏秋冬',3930],
['33.45', '依然对你情有独钟',4379],
['37.83', '一定是夜色过于朦胧',4289],
['42.12', '让思念再次风起云涌',4220],
['46.34', '多少人来人去缘分匆匆',4399],
['50.74', '那种寂寞只有你懂',5850],
['56.59', '在最深的红尘与你重逢',4329],
['60.92', '不负我这一生痴痴地等',4390],
['65.31', '无论再多的伤再苦的痛',4219],
['69.53', '这一刻都冰消雪融',4250],
['73.78', '在最深的红尘与你重逢',3959],
['77.74', '圆了我多年来残留的梦',4299],
['82.04', '纵然再大的雨再狂的风',4240],
['86.28', '我们一起风雨兼程',6819],
['93.10', '',20409],
['113.51', '一定是前世未了的情',4230],
['117.74', '在心中留下太多感动',4369],
['122.11', '经过花开花谢春夏秋冬',3909],
['126.02', '依然对你情有独钟',4470],
['130.49', '一定是夜色过于朦胧',4209],
['134.70', '让思念再次风起云涌',4290],
['138.99', '多少人来人去缘分匆匆',3989],
['142.98', '那种寂寞只有你懂',6270],
['149.25', '在最深的红尘与你重逢',4240],
['153.49', '不负我这一生痴痴地等',4409],
['157.90', '无论再多的伤再苦的痛',4179],
['162.08', '这一刻都冰消雪融',3980],
['166.06', '在最深的红尘与你重逢',4229],
['170.29', '圆了我多年来残留的梦',4450],
['174.74', '纵然再大的雨再狂的风',4099],
['178.84', '我们一起风雨兼程',8430],
['187.27', '在最深的红尘与你重逢',4429],
['191.70', '不负我这一生痴痴地等',4170],
['195.87', '无论再多的伤再苦的痛',4150],
['200.02', '这一刻都冰消雪融',3969],
['203.99', '在最深的红尘与你重逢',4329],
['208.32', '圆了我多年来残留的梦',4240],
['212.56', '纵然再大的雨再狂的风',4300],
['216.86', '我们一起风雨兼程',5759],
['222.62', '',4716],
['227.34', ' 吉他 : 刘奕辰',5275],
['232.61', ' 和声 : Zing Studio',5275],
['237.89', ' 混音 : 王哲',5275],
['243.16', ' 发行 : 壹歌传媒',5275],
['248.44', ' 出品人 : 王峰',5274],
['253.71', ' 【该歌曲未经发行方书面授权，禁止上传任何版本至音乐平台】',3000]
]
;
aud.loop = false;
mplayer.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', 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 + 'ms');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>
猫到了个沙发。。{:4_173:} 没听见音乐，你老再调一下。。{:4_174:} 红芍药 发表于 2022-10-4 19:25
猫到了个沙发。。
测试完的，到这里怎么好像不好使呢？{:5_115:} 东篱闲人 发表于 2022-10-4 19:26
测试完的，到这里怎么好像不好使呢？
嗯，没音乐。。 不好使，俺揍他。。。。。{:4_170:} 醉美水芙蓉 发表于 2022-10-4 19:52
东篱老师做得不错！
都是他们逼的。。。。{:4_170:} 最深的红尘，不是上海，就是北京了，绝对不是俺家重庆 马黑黑 发表于 2022-10-4 20:13
最深的红尘，不是上海，就是北京了，绝对不是俺家重庆
那地方不确定，故事在哪，红尘就在哪。。。。 东篱闲人 发表于 2022-10-4 20:22
那地方不确定，故事在哪，红尘就在哪。。。。
有这说法？你确定？ 马黑黑 发表于 2022-10-4 20:28
有这说法？你确定？
嗯嗯，你的故事在哪？ 东篱闲人 发表于 2022-10-4 20:22
那地方不确定，故事在哪，红尘就在哪。。。。
老头的~~~就在花潮{:4_170:} 东篱闲人 发表于 2022-10-4 20:36
嗯嗯，你的故事在哪？
我木有故事 看到这半透明的前景以为是背衬视频呢，结果是歌词同步。制作漂亮，欣赏东篱大哥好帖{:4_187:} 东篱大哥的帖子有意思，歌词里还带毫秒级的微调呢{:4_173:} 老头闲得，到处与姑娘相逢{:4_189:} 马黑黑 发表于 2022-10-4 20:38
我木有故事
{:4_186:} 红影 发表于 2022-10-4 20:43
东篱大哥的帖子有意思，歌词里还带毫秒级的微调呢
你看看，这就是水平啊。。。。。{:4_170:} 小九 发表于 2022-10-4 20:46
老头闲得，到处与姑娘相逢
没办法，习惯了。。。{:5_106:}
页:
[1]
2