妹妹想哥泪花儿掉

马黑黑

有一首歌叫妹妹找个泪花流

马黑黑

你去参考这个现成的例子：

https://www.huachaowang.com/foru ... hread&tid=63774

红影

漂亮，欣赏水芙蓉美女好帖

马黑黑

或者参考这个机制更简单的：

https://www.huachaowang.com/foru ... &extra=page%3D1

起个网名好难

试试这代码，歌词是酷我上的，与你的歌曲匹配可能差点

1. <style>
   
2. #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);}}
   
3. </style>
   
4. 
   
5. <div id="papa">
   
6.         <div id="lrc" data-lrc="妹妹想哥泪花儿掉">妹妹想哥泪花儿掉</div>
   
7.     <span id="btnplay" title="播放/暂停"></span>
   
8. </div>
   
9. 
   
10. <script>
    
11. (function() {
    
12.         var mKey = 0,  aud = new Audio();
    
13.         var lrcAr = [
    
14. ['4.63', '妹妹想哥泪花儿掉（对唱版）',1380],
    
15. ['6.01', '词曲：钰柃',1350],
    
16. ['7.36', '演唱：月下思故人 钰柃 ',29820],
    
17. ['37.18', '男：山高那个水远路条条',7390],
    
18. ['44.57', '女：妹妹的心里呀好苦恼',7100],
    
19. ['51.67', '男：看也看不够妹妹的容貌',7180],
    
20. ['58.85', '合：寂寞夜里想（妹）哥想的睡不着想的睡不着',10960],
    
21. ['69.81', '男：天若那个有情天亦老',7229],
    
22. ['77.04', '女：妹妹的心事你可知道',7210],
    
23. ['84.25', '男：见了你一面怦然的心跳',7210],
    
24. ['91.46', '合：寂寞夜里想（妹）哥奈何煎熬奈何煎熬',11009],
    
25. ['102.47', '女：妹妹呀想哥泪花儿掉',7300],
    
26. ['109.77', '男：一颗真心谁能明了',7250],
    
27. ['117.02', '女：自从你拨动我的心跳',7239],
    
28. ['124.26', '合：再也难把你忘掉难把你忘掉难把你忘掉',11049],
    
29. ['135.31', '女：妹妹呀想哥泪花儿掉',7169],
    
30. ['142.48', '男：只愿和你相守暮朝',7190],
    
31. ['149.67', '女：哥哥你要拉紧妹妹的手',7369],
    
32. ['157.04', '合：一起走到天涯海角天涯海角天涯海角',25629],
    
33. ['182.67', '男：天若那个有情天亦老',7070],
    
34. ['189.74', '女：妹妹的心事你可知道',7280],
    
35. ['197.02', '男：见了你一面怦然的心跳',7289],
    
36. ['204.31', '合：寂寞夜里想（妹）哥奈何煎熬奈何煎熬',10939],
    
37. ['215.25', '女：妹妹呀想哥泪花儿掉',7310],
    
38. ['222.56', '男：一颗真心谁能明了',7189],
    
39. ['229.75', '女：自从你拨动我的心跳',7259],
    
40. ['237.01', '合：再也难把你忘掉难把你忘掉难把你忘掉',11020],
    
41. ['248.03', '女：妹妹呀想哥泪花儿掉',7159],
    
42. ['255.19', '男：只愿和你相守暮朝',7240],
    
43. ['262.43', '女：哥哥你要拉紧妹妹的手',7250],
    
44. ['269.68', '合：一起走到天涯海角天涯海角天涯海角',3000],
    
45. ['280.00', '',10000]
    
46. ];
    
47.         aud.src = 'https://www.qqmc.com/up/kwlink.php?id=244827513';
    
48. 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[mKey][0]){showLrc(lrcAr[mKey][2])}});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[mKey][1];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');

复制代码

小辣椒

欣赏水芙蓉的精彩制作

相约爱晚亭

欣赏佳作！

红影

醉美水芙蓉 发表于 2022-10-16 13:24
谢谢红影美女光临！

问好水芙蓉，周日快乐