https://www.huachaowang.com/forum.php?mod=viewthread&tid=63774 漂亮，欣赏水芙蓉美女好帖{:4_187:} 或者参考这个机制更简单的：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=63752&extra=page%3D1 本帖最后由 起个网名好难 于 2022-10-16 11:39 编辑
试试这代码，歌词是酷我上的，与你的歌曲匹配可能差点
<style>
#papa{width:1024px;height:640px;font-size:14px;background:darkred url('https://s1.ax1x.com/2022/10/15/x0q6JO.jpg') no-repeat center/cover;display:grid;place-items:center;box-shadow:3px 3px 20px #000;user-select:none;position:relative;margin:80px 16px 32px -200px;}#papa::before{position:absolute;content:'';top:0;left:0;bottom:0;right:0;background:url('http://tuku.link/imgs/2022/09/52b4b07ff00e29b1.jpg') no-repeat center/cover;opacity:.25;}#lrc{--motion:cover1;--tt:1s;--state:running;position:absolute;top:15px;left:20px;font:bold 2.4em sans-serif;color:hsl(20,10%,80%);-webkit-background-clip:text;filter:drop-shadow(1px 1px 2px hsla(20,100%,0%,.95));}#lrc::before{position:absolute;content:attr(data-lrc);width:0;height:100%;color:transparent;overflow:hidden;white-space:nowrap;background:linear-gradient(180deg,hsla(0,60%,100%,.95),hsla(120,90%,50%,.75));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%;}}#btnplay{position:absolute;bottom:40px;left:100px;width:100px;height:100px;border-radius:50%;box-shadow:20px 15px 0 0 yellow;cursor:pointer;animation:swing 1s linear infinite alternate;}#btnplay::before{position:absolute;content:'';left:20px;top:15px;width:100%;height:100%;}#btnplay::after{position:absolute;content:'';left:30px;top:30px;width:40%;height:40%;border-radius:50%;background:yellow;box-shadow:0 0 30px 0px yellow,0 0 100px 0 snow;}@keyframes swing{from{transform:rotate(0deg);}to{transform:rotate(30deg);}}
</style>
<div id="papa">
<div id="lrc" data-lrc="妹妹想哥泪花儿掉">妹妹想哥泪花儿掉</div>
<span id="btnplay" title="播放/暂停"></span>
</div>
<script>
(function() {
var mKey = 0,aud = new Audio();
var lrcAr = [
['4.63', '妹妹想哥泪花儿掉（对唱版）',1380],
['6.01', '词曲：钰柃',1350],
['7.36', '演唱：月下思故人 钰柃 ',29820],
['37.18', '男：山高那个水远路条条',7390],
['44.57', '女：妹妹的心里呀好苦恼',7100],
['51.67', '男：看也看不够妹妹的容貌',7180],
['58.85', '合：寂寞夜里想（妹）哥想的睡不着想的睡不着',10960],
['69.81', '男：天若那个有情天亦老',7229],
['77.04', '女：妹妹的心事你可知道',7210],
['84.25', '男：见了你一面怦然的心跳',7210],
['91.46', '合：寂寞夜里想（妹）哥奈何煎熬奈何煎熬',11009],
['102.47', '女：妹妹呀想哥泪花儿掉',7300],
['109.77', '男：一颗真心谁能明了',7250],
['117.02', '女：自从你拨动我的心跳',7239],
['124.26', '合：再也难把你忘掉难把你忘掉难把你忘掉',11049],
['135.31', '女：妹妹呀想哥泪花儿掉',7169],
['142.48', '男：只愿和你相守暮朝',7190],
['149.67', '女：哥哥你要拉紧妹妹的手',7369],
['157.04', '合：一起走到天涯海角天涯海角天涯海角',25629],
['182.67', '男：天若那个有情天亦老',7070],
['189.74', '女：妹妹的心事你可知道',7280],
['197.02', '男：见了你一面怦然的心跳',7289],
['204.31', '合：寂寞夜里想（妹）哥奈何煎熬奈何煎熬',10939],
['215.25', '女：妹妹呀想哥泪花儿掉',7310],
['222.56', '男：一颗真心谁能明了',7189],
['229.75', '女：自从你拨动我的心跳',7259],
['237.01', '合：再也难把你忘掉难把你忘掉难把你忘掉',11020],
['248.03', '女：妹妹呀想哥泪花儿掉',7159],
['255.19', '男：只愿和你相守暮朝',7240],
['262.43', '女：哥哥你要拉紧妹妹的手',7250],
['269.68', '合：一起走到天涯海角天涯海角天涯海角',3000],
['280.00', '',10000]
];
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=244827513';
aud.autoplay=true;aud.loop=false;aud.addEventListener('pause',()=>mState());aud.addEventListener('play',()=>mState());aud.addEventListener('ended',()=>{mKey=0;aud.play()});aud.addEventListener('timeupdate',()=>{if(aud.currentTime>=lrcAr){showLrc(lrcAr)}});var mState=()=>aud.paused?(lrc.style.setProperty('--state','paused'),btnplay.style.animationPlayState='paused'):(lrc.style.setProperty('--state','running'),btnplay.style.animationPlayState='running');var showLrc=(time)=>{var name=mKey%2==0?'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++};btnplay.style.animationPlayState=aud.paused?'paused':'running';btnplay.onclick=()=>mplay();let mplay=()=>aud.paused?(aud.play(),btnplay.style.animationPlayState='running'):(aud.pause(),btnplay.style.animationPlayState='paused'); 欣赏水芙蓉的精彩制作{:4_199:} 欣赏佳作！ 醉美水芙蓉 发表于 2022-10-16 13:24
谢谢红影美女光临！
问好水芙蓉，周日快乐{:4_204:}
页:
[1]