东篱闲人 发表于 2022-6-6 09:19

珍珠传奇


<style>

.outer { left: -400px; width: 1400px; height: 734px; box-shadow: 2px 2px 4px #333; background: teal url('https://pic.imgdb.cn/item/629d50570947543129a8ae20.jpg') no-repeat; position: relative; }
.ele1 { position: absolute; left: 150px; top: 272px; width: 190px; height: 190px; border-radius: 50%;background:#006400 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=1918575343.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-6 09:48

特效用的非常好{:4_199:}

东篱闲人 发表于 2022-6-6 09:53

小九 发表于 2022-6-6 09:48
特效用的非常好

播放器。{:5_117:}

加林森 发表于 2022-6-6 10:33

老兄这个制作真漂亮，把镜子变成了播放器了，赞！帮着喊：@小辣椒 {:4_195:}

东篱闲人 发表于 2022-6-6 10:38

加林森 发表于 2022-6-6 10:33
老兄这个制作真漂亮，把镜子变成了播放器了，赞！帮着喊：@小辣椒

珍珠。只是立体感少了点。。。{:5_117:}

加林森 发表于 2022-6-6 10:45

东篱闲人 发表于 2022-6-6 10:38
珍珠。只是立体感少了点。。。

还是挺漂亮的。。。。{:5_116:}

小九 发表于 2022-6-6 10:49

东篱闲人 发表于 2022-6-6 09:53
播放器。

一举两得

东篱闲人 发表于 2022-6-6 10:59

加林森 发表于 2022-6-6 10:45
还是挺漂亮的。。。。

马马虎虎。。。{:5_117:}

东篱闲人 发表于 2022-6-6 10:59

小九 发表于 2022-6-6 10:49
一举两得

瞎祸害呗，闲的。。。{:5_117:}

加林森 发表于 2022-6-6 11:06

东篱闲人 发表于 2022-6-6 10:59
马马虎虎。。。

你说了算。。。{:4_189:}

红影 发表于 2022-6-6 11:20

把按钮做得这么大，正好嵌在那镜框里呢。东篱大哥对播放器按钮的使用真是出神入化{:4_187:}

小辣椒 发表于 2022-6-6 12:42

加林森 发表于 2022-6-6 10:33
老兄这个制作真漂亮，把镜子变成了播放器了，赞！帮着喊：@小辣椒

来了，谢谢队长{:4_187:}

小辣椒 发表于 2022-6-6 12:43

特棒！！！！{:4_178:}

小辣椒 发表于 2022-6-6 12:46

老头点缀的太棒了，居然配了这首柔情的个歌曲，你咋会是老头呢？明明是个年轻的潮流男{:4_172:}

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

小辣椒 发表于 2022-6-6 12:46
老头点缀的太棒了，居然配了这首柔情的个歌曲，你咋会是老头呢？明明是个年轻的潮流男

老的不要不要的。。。{:5_103:}

马黑黑 发表于 2022-6-6 12:49

唯美的作品

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

马黑黑 发表于 2022-6-6 12:49
唯美的作品

说的好听。。。{:4_190:}

小辣椒 发表于 2022-6-6 12:51

东篱闲人 发表于 2022-6-6 12:48
老的不要不要的。。。

老头真的佩服的不要不要的{:4_178:}

马黑黑 发表于 2022-6-6 12:53

东篱闲人 发表于 2022-6-6 12:50
说的好听。。。

不好听我不说

东篱闲人 发表于 2022-6-6 13:08

小辣椒 发表于 2022-6-6 12:51
老头真的佩服的不要不要的

俺佩服师傅五体投地。。。{:4_198:}
页: [1] 2
查看完整版本: 珍珠传奇