在最深的红尘里重逢
本帖最后由 东篱闲人 于 2023-4-18 12:33 编辑 <br /><br /><style>#papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/643e047c0d2dde57771f00f7.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: 0px; height: 0px; 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="在最深的红尘与你重逢">花潮论坛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 + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script> 在最深的红尘里，感念一份挂牵，这份温暖会在春天里发芽，开成灿烂，愈久弥香。谢谢。谢谢你们。。。。{:4_204:} 把沙发留给@小辣椒@一朵梅，两位美女快来收礼了{:4_195:} 东篱大哥偏心，你没来的日子我也时常念叨的，咋没我的礼物{:4_173:} 这个图图的下部像活页夹似的打孔呢，播放器按钮边的小风筝也很漂亮，歌词同步很准确。欣赏东篱大哥好帖，两位美人儿收礼开心{:4_199:} 红影 发表于 2023-4-18 11:01
东篱大哥偏心，你没来的日子我也时常念叨的，咋没我的礼物
哈哈，同感。{:4_174:} 还是这个好听，一如既往的东篱出彩银。{:4_173:} 红影 发表于 2023-4-18 11:01
东篱大哥偏心，你没来的日子我也时常念叨的，咋没我的礼物
这是对发寻人启事的一份回答。。。{:5_117:} 红芍药 发表于 2023-4-18 11:14
哈哈，同感。
你同感啥？你都消失半年了。。。。{:5_117:} 东篱闲人 发表于 2023-4-18 11:18
你同感啥？你都消失半年了。。。。
怎么没见你念叨我啊？{:4_361:} 红芍药 发表于 2023-4-18 11:20
怎么没见你念叨我啊？
默默的想，就是不说。{:5_117:} 东篱闲人 发表于 2023-4-18 11:25
默默的想，就是不说。
噗，没忘记我这个老友就好。{:4_189:} 红芍药 发表于 2023-4-18 11:27
噗，没忘记我这个老友就好。
时光不老。。。。 终于有点空～
闲人回来大家都放心了～{:4_180:} 王小雨是真名吗？ 一朵梅 发表于 2023-4-18 13:20
王小雨是真名吗？
啊？{:5_115:}是吧。。。 东篱闲人 发表于 2023-4-18 13:25
啊？是吧。。。
噗，现在来找不见了王小雨，正要说你和我同名字呢，我叫何小雨。{:4_189:} 俺听蹭歌来了。 东篱闲人 发表于 2023-4-18 11:17
这是对发寻人启事的一份回答。。。
还好寻人启事有了结果{:4_173:} 红芍药 发表于 2023-4-18 13:45
噗，现在来找不见了王小雨，正要说你和我同名字呢，我叫何小雨。
真巧。。。{:5_117:}
页:
[1]
2