加林森 发表于 2022-6-3 09:40

【童心飞扬】《让我们荡起双浆（DJ LiSiR remix）》-DJ LiSiR


<style>

.outer { left: -214px; width: 1024px; height: 768px; box-shadow: 2px 2px 4px #333; background: teal url('https://pic.imgdb.cn/item/62996497094754312925cac3.jp') no-repeat; position: relative; }
.ele1 { position: absolute; left: 60px; top: 60px; width: 80px; height: 80px; border-radius: 50%;background: #ccc linear-gradient(transparent 49%,rgba(255,0,0,.65) 50%,transparent 0) no-repeat; background-size: 0% 100%; box-shadow: 5px 5px 30px 0 gray; cursor:pointer; }
.ele1::before, .ele1::after { position: absolute; content: ''; width: inherit; height: inherit; border-radius: inherit; }
.ele1::before { background: linear-gradient(transparent,rgba(0,0,0,0)); animation: flash 1s linear infinite; }
.ele1::after { background: radial-gradient(circle at 30% 30%,transparent,rgba(0,255,0,.25)); }
@keyframes flash { to { background: linear-gradient(transparent,rgba(0,0,0,.6)); } }

</style>

<div class="outer">
        <div class="ele1"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1912372220.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let ele1 = document.querySelector('.ele1'), aud = document.querySelector('#aud');
ele1.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate',() => ele1.style.backgroundSize = 100 * aud.currentTime / aud.duration + '% 100%');

</script>

红影 发表于 2022-6-3 10:41

这个播放器放的位置调得真好。很欢快的画面，给队长点赞{:4_187:}

加林森 发表于 2022-6-3 10:51

红影 发表于 2022-6-3 10:41
这个播放器放的位置调得真好。很欢快的画面，给队长点赞

谢谢红影支持！我用秀秀拼图功能制作的。

梦油 发表于 2022-6-3 13:50

《让我们荡起双桨》使我回忆起儿时在北海公园划船的情景，太美了。

加林森 发表于 2022-6-3 13:55

梦油 发表于 2022-6-3 13:50
《让我们荡起双桨》使我回忆起儿时在北海公园划船的情景，太美了。

是啊。我又要出去锻炼了。等会见！

梦油 发表于 2022-6-3 15:00

加林森 发表于 2022-6-3 13:55
是啊。我又要出去锻炼了。等会见！

一会见。
页: [1]
查看完整版本: 【童心飞扬】《让我们荡起双浆（DJ LiSiR remix）》-DJ LiSiR