依靠

马黑黑

💗 💓

🐞

马黑黑

代码分享

1. <style>
   
2. :root { --state: running; --prg: 0%; --delay: 0s; }
   
3. .mydiv { margin: 0 0 0 calc(50% - 621px); width: 1080px; height: 674px; background: #333 url('https://638183.freep.cn/638183/t23/webp1/yikc.webp'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
   
4. .heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
   
5. .heart:nth-of-type(2) { --delay: -2.5s; }
   
6. #mplayer { position: absolute; bottom: 10px; width: 200px; height: 40px; background: linear-gradient(to right,red var(--prg),#eee 0) repeat-x 0 50% / 100% 2px; }
   
7. #mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
   
8. #mplayer::before { content: attr(data-cu); left: -50px; }
   
9. #mplayer::after { content: attr(data-du); right: -50px; }
   
10. #btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 0; font: normal 30px sans-serif; cursor: pointer; animation: swing .3s infinite linear var(--state); }
    
11. @keyframes swing { from { transform: rotate(90deg) skew(-5deg); } to { transform: rotate(90deg) skew(5deg); } }
    
12. @keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
    
13. </style>
    
14. 
    
15. <div class="mydiv">
    
16.     <span class="heart">&#128151;</span>
    
17.     <span class="heart">&#128147;</span>
    
18.     <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
    
19.             <div id="btnplay" title="暂停/播放">&#128030;</div>
    
20.     </div>
    
21.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=25931264" loop autoplay></audio>
    
22. </div>
    
23. 
    
24. <script>
    
25. (function() {
    
26.     let root = document.querySelector(':root');
    
27.     let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
28.     let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
29.     aud.addEventListener('pause', mState, false);
    
30.     aud.addEventListener('play', mState, false);
    
31.     aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
    
32.     btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
33.     mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
    
34. })();
    
35. </script>

复制代码

红影

不知道黑黑是不是需要占楼。这个播放器有趣，还有心形符号也有趣。

马黑黑

醉美水芙蓉 发表于 2023-7-20 20:51
小播放器很巧妙！

晚上好

马黑黑

红影 发表于 2023-7-20 20:41
不知道黑黑是不是需要占楼。这个播放器有趣，还有心形符号也有趣。

不用占位。播放器我会在后院单独解释。

红影

马黑黑 发表于 2023-7-20 20:53
不用占位。播放器我会在后院单独解释。

这样好，可以解答得更仔细

小辣椒

甲壳虫按钮

马黑黑

红影 发表于 2023-7-20 21:07
这样好，可以解答得更仔细

马黑黑

小辣椒 发表于 2023-7-20 21:19
甲壳虫按钮

红影

马黑黑 发表于 2023-7-20 22:21

黑黑这个好像用的伴奏音乐。

马黑黑

红影 发表于 2023-7-20 23:04
黑黑这个好像用的伴奏音乐。

不是伴奏，是电子琴版

红影

马黑黑 发表于 2023-7-21 07:30
不是伴奏，是电子琴版

里面好像听到有伴唱呢，用来做伴奏也挺不错的

千羽

温馨浪漫的画面，两颗心儿也在欢快地飞舞

千羽

甲壳虫播放器挺有意思的，给黑黑老师点赞送花花

小辣椒

千羽 发表于 2023-7-21 22:06
甲壳虫播放器挺有意思的，给黑黑老师点赞送花花

看见千羽了

小辣椒

黑黑这个画面是二颗心的碰撞，好浪漫的

千羽

小辣椒 发表于 2023-7-21 22:12
看见千羽了

小辣椒晚上好

小辣椒

千羽 发表于 2023-7-21 22:14
小辣椒晚上好

啊~~千羽还在啊，今天我上来迟了一点

马黑黑

小辣椒 发表于 2023-7-21 22:13
黑黑这个画面是二颗星的碰撞，好浪漫的

两颗心。你是第一个提出这个点，这才是帖子精彩之处，而不是那个虫虫播放器