牡丹 （摄影：老跳）

晴天小鱼

04:29 | 00:43

晴天小鱼

姥姥家
歌手：崔一乔


卖豆腐卖豆芽卖豆腐脑卖豆腐皮
修理伞修电视修理钢筋锅换锅底
卖豆腐卖豆芽卖豆腐脑卖豆腐皮
修理伞修电视修理钢筋锅换锅底
搬着个板凳在门前写作业
红红的太阳照在窝院子中间
滚着窝饺子皮手里还和着面
姥姥的下午饭就快要做毕咧
你看窝水里的鱼儿它游啊游
舅妈的兔儿帽永远织不够
额（我）家的小院子一共有两层楼
在姥姥的怀里永远都睡得熟
于事我又听见
谁要西红柿辣子洋柿子葱
新鲜的醪糟胚永远那么浓
谁要韭菜西葫芦洋芋藕
巷口还站着窝一只大狼狗
(米脂的婆姨，绥德的汉；
清涧的石板，瓦窑堡的炭；
蓼花糖泡油糕，还有浆水面
三原的媳妇不能看(娶 嘴太叼了))
你看窝水里的鱼儿它游啊游
舅妈的兔儿帽永远织不够
额家的小院子一共有两层楼
在姥姥的怀里永远都睡得熟
于事我又听见
谁要西红柿辣子洋柿子葱
新鲜的醪糟胚永远那么浓
谁要韭菜西葫芦洋芋藕
巷口还暂着窝一直大狼狗
谁要西红柿辣子洋柿子葱
新鲜的醪糟胚永远那么浓
谁要韭菜西葫芦洋芋藕
巷口还站着窝一只大狼狗
卖豆腐卖豆芽卖豆腐脑卖豆腐皮
修理伞修电视修理钢筋锅换锅底

晴天小鱼

1. <style>
   
2.         #tiezi { margin: 130px 0 30px calc(50% 0px); display: grid; place-items: center; width: 600px; height: 800px; background:lightblue  url('https://img.wyc520.com.cn/data/attachment/forum/202404/11/133310f38is8btwiokzmb8.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 3px 3px 6px gray; position: relative; }
   
3.         #tiezi:hover .vid { opacity: .07; }
   
4. #mplayer { position: absolute; bottom:10px;  width: fit-content; height: fit-content; display: flex;flex-direction: column;align-items: center; gap: 8px; z-index: 9; }         
   
5. 
   
6. #btnwrap { position: relative;width: 100px; height: 100px; display: grid; place-items: center; border-radius:50%;border: solid 0px  Cyan; background: #ccc linear-gradient(to top right, rgba(255,0,0,1.0), rgba(255,0,0,.65)); background: url('https://wyc520.com.cn/uc_server/avatar.php?uid=53395&size=big') no-repeat center/cover; cursor: pointer;object-fit: cover;mix-blend-mode:screen;box-shadow: 3px 3px 1px gray ; animation: rot 5s linear infinite alternate  ; }
   
7. 
   
8. #btnwrap:hover {border-radius: 50%;border: solid 0px Cyan;background: #000 linear-gradient(to top right, rgba(255,0,0,1), rgba(255,0,0,.65)); background: url('https://wyc520.com.cn/uc_server/avatar.php?uid=53395&size=big') no-repeat center/cover; transition: 5s; object-fit: cover;mix-blend-mode:screen; box-shadow: 3px 3px 18px Cyan ; animation: rot 5s  linear infinite alternate; }
   
9. 
   
10. #btnplay {position: absolute;width: 48px; height: 48px;  background: url('https://img.wyc520.com.cn/data/attachment/forum/202406/12/101333wb2ep2zvmpmm9d2t.png') no-repeat left top;filter: hue-rotate(360deg);}
    
11. #btnpause {position: absolute;width: 48px; height: 48px;  background: url('https://img.wyc520.com.cn/data/attachment/forum/202406/12/101333wb2ep2zvmpmm9d2t.png') no-repeat right top; filter: hue-rotate(0deg); }
    
12. #prog {width:300px; height: 2px;background: #cccccc59 linear-gradient(to right,snow,snow,snow) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
    
13. #prog::before { position: absolute;content: ''; top: -7px; width: inherit;height: 15px; }
    
14. #prog:hover::before { background: rgba(0,200,200,.15); }
    
15. #tmsg { font: normal 16px sans-serif; color: snow;}
    
16.         .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover;  transition: 5s; pointer-events: none; opacity: .27; }
    
17. 
    
18. @keyframes rot { to { transform: rotate(360deg); } }
    
19. </style>
    
20. 
    
21. <div id="tiezi">
    
22.                 <div id="mplayer">
    
23. <span id="btnwrap"><span id="btnplay" style="display: none;"></span><span id="btnpause" style="display: block;"></span></span><span id="prog" style="background-size: 80.4333px 2px;"></span><span id="tmsg">04:29 | 00:43</span>
    
24.                 </div>   
    
25.         <video class="vid" src="https://st0.dancf.com/gaoding/gaoding/111f1aa5-63e5-456b-8b78-502103f08caa51052311.mp*4" muted="muted" autoplay="autoplay" loop="loop"></video>
    
26. </div>
    
27. 
    
28. <script>
    
29. let aud = new Audio();
    
30. aud.src = 'https://music.163.com/song/media/outer/url?id=1342795329&auto.mp3';
    
31. aud.autoplay = true;aud.loop = true;
    
32. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
33. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
34. aud.addEventListener('pause', () => btnstate());
    
35. aud.addEventListener('play',() => btnstate());
    
36. aud.addEventListener('timeupdate', () => {prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
    
37. tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);  
    
38. for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1];}});
    
39. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
    
40. let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);
    
41. let min = parseInt(val / 60), sec = parseFloat(val % 60);
    
42. if(min < 10) min = '0' + min;  if(sec < 10) sec = '0' + sec; return min + ':' + sec;}
    
43. </script>
    
44. 
    
45. 
    
46. 
    

复制代码

晴天小鱼

@卷儿跳跳

天空随风

越来越好

晴天小鱼

天空随风 发表于 2024-6-12 17:12
越来越好

可以用自己头像做播放器啦

隐身药水

给小鱼厉害的

隐身药水

一会儿给跳版都给转迷糊了

隐身药水

感谢小鱼分享代码

夏天的梦

做的真好