依靠
<style>:root { --state: running; --prg: 0%; --delay: 0s; }
.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; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#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; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px; }
#mplayer::after { content: attr(data-du); right: -50px; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 0; font: normal 30px sans-serif; cursor: pointer; animation: swing .3s infinite linear var(--state); }
@keyframes swing { from { transform: rotate(90deg) skew(-5deg); } to { transform: rotate(90deg) skew(5deg); } }
@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); } }
</style>
<div class="mydiv">
<span class="heart">💗</span>
<span class="heart">💓</span>
<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
<div id="btnplay" title="暂停/播放">🐞</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25931264" loop autoplay></audio>
</div>
<script>
(function() {
let root = document.querySelector(':root');
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;}
let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
</script>
代码分享
<style>
:root { --state: running; --prg: 0%; --delay: 0s; }
.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; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#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; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px; }
#mplayer::after { content: attr(data-du); right: -50px; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 0; font: normal 30px sans-serif; cursor: pointer; animation: swing .3s infinite linear var(--state); }
@keyframes swing { from { transform: rotate(90deg) skew(-5deg); } to { transform: rotate(90deg) skew(5deg); } }
@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); } }
</style>
<div class="mydiv">
<span class="heart">💗</span>
<span class="heart">💓</span>
<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
<div id="btnplay" title="暂停/播放">🐞</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25931264" loop autoplay></audio>
</div>
<script>
(function() {
let root = document.querySelector(':root');
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;}
let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
</script>
不知道黑黑是不是需要占楼。这个播放器有趣，还有心形符号也有趣。{:4_199:} 醉美水芙蓉 发表于 2023-7-20 20:51
小播放器很巧妙！
晚上好{:4_190:} 红影 发表于 2023-7-20 20:41
不知道黑黑是不是需要占楼。这个播放器有趣，还有心形符号也有趣。
不用占位。播放器我会在后院单独解释。 马黑黑 发表于 2023-7-20 20:53
不用占位。播放器我会在后院单独解释。
这样好，可以解答得更仔细{:4_187:} 甲壳虫按钮{:4_189:} 红影 发表于 2023-7-20 21:07
这样好，可以解答得更仔细
{:4_181:} 小辣椒 发表于 2023-7-20 21:19
甲壳虫按钮
{:4_189:} 马黑黑 发表于 2023-7-20 22:21
黑黑这个好像用的伴奏音乐。 红影 发表于 2023-7-20 23:04
黑黑这个好像用的伴奏音乐。
不是伴奏，是电子琴版 马黑黑 发表于 2023-7-21 07:30
不是伴奏，是电子琴版
里面好像听到有伴唱呢，用来做伴奏也挺不错的{:4_173:} 温馨浪漫的画面，两颗心儿也在欢快地飞舞{:4_187:} 甲壳虫播放器挺有意思的，给黑黑老师点赞{:4_178:}送花花{:4_187:}{:4_204:} 千羽 发表于 2023-7-21 22:06
甲壳虫播放器挺有意思的，给黑黑老师点赞送花花
看见千羽了{:4_179:} 黑黑这个画面是二颗心的碰撞，好浪漫的 小辣椒 发表于 2023-7-21 22:12
看见千羽了
小辣椒晚上好{:4_179:} 千羽 发表于 2023-7-21 22:14
小辣椒晚上好
啊~~千羽还在啊，今天我上来迟了一点 小辣椒 发表于 2023-7-21 22:13
黑黑这个画面是二颗星的碰撞，好浪漫的
两颗心。你是第一个提出这个点，这才是帖子精彩之处，而不是那个虫虫播放器{:4_170:}
页:
[1]
2