论坛 › 欢乐水吧 › 《阳光照耀在塔什库尔干》- 陈音

加林森 发表于 2022-6-4 14:42

《阳光照耀在塔什库尔干》- 陈音

<style>

.outer { left: -302px; width: 1200px; height: 673px; background: url('https://pic.imgdb.cn/item/629afd49094754312900dcd4.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('/data/attachment/forum/202206/03/202728j87yxyk38w3cwc3g.png'); animation: cloud_fly 40s linear infinite; }
.outer meter { position: absolute; width: 100px; left: 50px; bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 60px; bottom: 110px; width: 80px; height: 10px; background: green; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left: calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px; background: darkgreen; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
        <div class="sky"></div>
        <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
        <div class="btn"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25731249.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');

aud.addEventListener('timeupdate', () => {
        meter.value = aud.currentTime / aud.duration * 100;
});

btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');

</script>

加林森 发表于 2022-6-4 14:42

@马黑黑

梦油 发表于 2022-6-4 15:09

那转动的风车为画面增添了灵气。

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

梦油 发表于 2022-6-4 15:09
那转动的风车为画面增添了灵气。

那个是播放器。

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

欣赏

梦油 发表于 2022-6-4 15:15

加林森 发表于 2022-6-4 15:12
那个是播放器。

是的，那个播放器为画面增添了灵气。

东篱闲人 发表于 2022-6-4 15:31

好！{:5_116:}

小辣椒 发表于 2022-6-4 16:02

队长直接套用了黑黑的{:4_178:}

醉美水芙蓉 发表于 2022-6-4 16:02

小辣椒 发表于 2022-6-4 16:03

这个背景图和云飘动还是很搭配的{:4_199:}

加林森 发表于 2022-6-4 17:02

马黑黑 发表于 2022-6-4 15:14
欣赏

嗯嗯

加林森 发表于 2022-6-4 17:03

梦油 发表于 2022-6-4 15:15
是的，那个播放器为画面增添了灵气。

是啊

加林森 发表于 2022-6-4 17:03

东篱闲人 发表于 2022-6-4 15:31
好！

谢谢老兄！{:4_190:}

加林森 发表于 2022-6-4 17:04

小辣椒 发表于 2022-6-4 16:02
队长直接套用了黑黑的

嗯嗯，挺好看的。

加林森 发表于 2022-6-4 17:04

醉美水芙蓉 发表于 2022-6-4 16:02
欣赏队长佳作！

谢谢！

加林森 发表于 2022-6-4 17:05

小辣椒 发表于 2022-6-4 16:03
这个背景图和云飘动还是很搭配的

是的，我就是感觉这些云在移动中会挺好看的才制作了。

东篱闲人 发表于 2022-6-4 17:05

加林森 发表于 2022-6-4 17:03
谢谢老兄！

和谐即是美。

加林森 发表于 2022-6-4 17:13

东篱闲人 发表于 2022-6-4 17:05
和谐即是美。

怎么把播放器放到最上面去呢？我有点晕了。

马黑黑 发表于 2022-6-4 17:25

加林森 发表于 2022-6-4 17:02
嗯嗯

{:4_190:}

加林森 发表于 2022-6-4 17:33

马黑黑 发表于 2022-6-4 17:25


谢茶

查看完整版本: 《阳光照耀在塔什库尔干》- 陈音