马黑黑 发表于 2022-6-2 12:30

珊瑚颂

<style>

.outer { left: -70px; width: 900px; height: 600px; box-shadow: 2px 2px 4px #333; background: teal url('https://www.huachaowang.com/data/attachment/forum/202206/02/122851uis56rkypcsi5sxs.jpg') no-repeat; position: relative; }
.ele1 { position: absolute; left: 400px; top: 240px; 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=5276829.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-2 12:50

老黑这个播放器不转了呢?变成一闪一闪的了,漂亮。大赞!{:4_199:}

小辣椒 发表于 2022-6-2 12:52

黑黑,这个播放器可以当月亮了{:4_199:}

马黑黑 发表于 2022-6-2 13:16

小辣椒 发表于 2022-6-2 12:52
黑黑,这个播放器可以当月亮了

可以考虑月牙变成满月的样子

马黑黑 发表于 2022-6-2 13:17

加林森 发表于 2022-6-2 12:50
老黑这个播放器不转了呢?变成一闪一闪的了,漂亮。大赞!

这是月明珠,珊瑚的守护神

加林森 发表于 2022-6-2 13:18

马黑黑 发表于 2022-6-2 13:17
这是月明珠,珊瑚的守护神

哦,明白了。真美!

马黑黑 发表于 2022-6-2 13:18

加林森 发表于 2022-6-2 13:18
哦,明白了。真美!

还行的吧

加林森 发表于 2022-6-2 13:19

马黑黑 发表于 2022-6-2 13:18
还行的吧

不是一般的行,而是太行了。

马黑黑 发表于 2022-6-2 13:19

加林森 发表于 2022-6-2 13:19
不是一般的行,而是太行了。

还太行山呢

加林森 发表于 2022-6-2 13:22

马黑黑 发表于 2022-6-2 13:19
还太行山呢

{:4_170:}

马黑黑 发表于 2022-6-2 13:23

加林森 发表于 2022-6-2 13:22


是不是啊

加林森 发表于 2022-6-2 13:24

马黑黑 发表于 2022-6-2 13:23
是不是啊

当然是啊

马黑黑 发表于 2022-6-2 13:31

加林森 发表于 2022-6-2 13:24
当然是啊

是就好

加林森 发表于 2022-6-2 13:32

马黑黑 发表于 2022-6-2 13:31
是就好

肯定好

马黑黑 发表于 2022-6-2 13:32

加林森 发表于 2022-6-2 13:32
肯定好

不好不行

加林森 发表于 2022-6-2 14:06

马黑黑 发表于 2022-6-2 13:32
不好不行

必须行

梦油 发表于 2022-6-2 15:02

本帖最后由 梦油 于 2022-6-2 15:03 编辑

黑黑朋友下午好!《珊瑚颂》是我很熟悉,也是我很喜爱的一支歌曲,它磅礴大气、穿透心灵。歌曲所传递的红色记忆和爱国主义情怀深深触动感染着我。谢谢黑黑朋友提供了这么美妙的歌曲。

红影 发表于 2022-6-2 16:40

黑黑把进度条弄到圆球里去了。真是创意无限{:4_187:}

小辣椒 发表于 2022-6-2 17:25

马黑黑 发表于 2022-6-2 13:16
可以考虑月牙变成满月的样子

这个可以自己变换?

马黑黑 发表于 2022-6-2 17:40

小辣椒 发表于 2022-6-2 17:25
这个可以自己变换?

不可以,要给他下指令
页: [1] 2
查看完整版本: 珊瑚颂