加林森 发表于 2022-6-4 11:36

《醉成都(伴奏)》- 古琴白无瑕/屠化冰


<style>

.outer { left: -302px; width: 1200px; height: 600px; box-shadow: 2px 2px 4px #333; background: teal url('https://pic.imgdb.cn/item/629ad1450947543129c0daea.jpg') no-repeat; position: relative; }
.ele1 { position: absolute; left: 160px; top: 60px; width: 100px; height: 100px; border-radius: 50%;background: #ff8c31 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=1460223088.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-4 11:41

图图制作的有灵气,帖子做的各元素融合度极好,十分精美

加林森 发表于 2022-6-4 11:45

马黑黑 发表于 2022-6-4 11:41
图图制作的有灵气,帖子做的各元素融合度极好,十分精美

谢谢老黑点评。{:4_190:}

小辣椒 发表于 2022-6-4 11:45

队长真的是好学生,速度是快啊{:4_199:}

加林森 发表于 2022-6-4 11:49

小辣椒 发表于 2022-6-4 11:45
队长真的是好学生,速度是快啊

这个还不错吧。

小辣椒 发表于 2022-6-4 11:50

加林森 发表于 2022-6-4 11:49
这个还不错吧。

队长你对这个帖最满意的是哪点?

加林森 发表于 2022-6-4 11:52

小辣椒 发表于 2022-6-4 11:50
队长你对这个帖最满意的是哪点?

我把播放器的颜色修改了,并让播放器可以随便移动了。

小辣椒 发表于 2022-6-4 11:57

加林森 发表于 2022-6-4 11:52
我把播放器的颜色修改了,并让播放器可以随便移动了。

就是啊,现在按钮出来的对比度大了,更加漂亮了

小辣椒 发表于 2022-6-4 11:58

所以,多做就有经验了,就会进步了。我们不用和谁去比,就和自己比,队长现在就是进步不少{:4_178:}

小辣椒 发表于 2022-6-4 11:59

有改变就是一大进步{:4_187:}

加林森 发表于 2022-6-4 12:07

小辣椒 发表于 2022-6-4 11:57
就是啊,现在按钮出来的对比度大了,更加漂亮了

是的。现在播放器与图片融合在一起了。

加林森 发表于 2022-6-4 12:08

小辣椒 发表于 2022-6-4 11:58
所以,多做就有经验了,就会进步了。我们不用和谁去比,就和自己比,队长现在就是进步不少

嗯嗯。谢谢小辣椒的鼓励,我会加油的。

加林森 发表于 2022-6-4 12:08

小辣椒 发表于 2022-6-4 11:59
有改变就是一大进步

是的是的。

马黑黑 发表于 2022-6-4 12:15

加林森 发表于 2022-6-4 11:45
谢谢老黑点评。

{:4_190:}

加林森 发表于 2022-6-4 12:16

马黑黑 发表于 2022-6-4 12:15


{:4_191:}

东篱闲人 发表于 2022-6-4 12:23

非常漂亮!{:5_116:}

东篱闲人 发表于 2022-6-4 12:24

太阳一明一暗的,不会有天灾吧?{:5_117:}

东篱闲人 发表于 2022-6-4 12:25

设计思路非常好。。。{:5_112:}

加林森 发表于 2022-6-4 12:25

东篱闲人 发表于 2022-6-4 12:23
非常漂亮!

那是开始的嘛。

加林森 发表于 2022-6-4 12:26

东篱闲人 发表于 2022-6-4 12:24
太阳一明一暗的,不会有天灾吧?

你的想法又出来了哇?真是大脑壳,想法都与别人不一样。。。。{:4_189:}
页: [1] 2
查看完整版本: 《醉成都(伴奏)》- 古琴白无瑕/屠化冰