《妖姬诞世》（迷幻重鼓秀舞极品）
<style>
.outer { left: -214px; width: 1024px; height: 575px; display: flex; justify-content: center; align-items: center; background: tan url('https://pic.imgdb.cn/item/62997f3809475431294167af.jpg') no-repeat; position: relative; }
.stage { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; }
.stage meter { width: 200px; }
.ball { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(120deg, #778899,#DEB887); z-index: 99; }
.ball::before{ position: absolute; content: ''; width: 10px; height: 10px; top: calc(50% - 5px); left: calc(50% - 5px); border-radius: 50%; background: linear-gradient(120deg,olive,tan); animation: sway 6s linear infinite; }
@keyframes sway { from { transform: rotate(0turn) translateY(-40px); } to { transform: rotate(1turn) translateY(-40px); } }
</style>
<div class="outer">
<div class="stage">
<div class="ball"></div>
<meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="1"></meter>
</div>
<audio id="aud" src="https://www.joy127.com/url/81006.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let stage = document.querySelector('.stage'),
meter = document.querySelector('#meter'),
ball = document.querySelector('.ball'),
aud = document.querySelector('#aud');
aud.addEventListener('timeupdate',function(){
let prog = 100 * aud.currentTime / aud.duration;
let deg = prog * 360 / 100;
ball.style.transform = 'rotate(' + deg + 'deg) translateY(-' + prog + 'px)';
meter.value = prog;
});
stage.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑 这漂亮的图图，播放器找个空档放置可能更好{:4_204:} 红影 发表于 2022-6-3 11:47
这漂亮的图图，播放器找个空档放置可能更好
放另外的地方我感觉不好看的。 这个队长做了多次了{:4_187:} 小辣椒 发表于 2022-6-3 12:04
这个队长做了多次了
我在找感觉，看能不能制作得更加好看。 虚拟歌姬 马黑黑 发表于 2022-6-3 12:09
虚拟歌姬
是的。 加林森 发表于 2022-6-3 12:11
是的。
现在多了 马黑黑 发表于 2022-6-3 12:14
现在多了
是的哦，四大美女都出来透气了。{:4_189:} 加林森 发表于 2022-6-3 12:18
是的哦，四大美女都出来透气了。
挺好的 马黑黑 发表于 2022-6-3 12:18
挺好的
是的是的 这个播放器挺有意思，月亮围着太阳转。 梦油 发表于 2022-6-3 13:58
这个播放器挺有意思，月亮围着太阳转。
嗯嗯，你像什么就是什么的。 加林森 发表于 2022-6-3 17:24
嗯嗯，你像什么就是什么的。
发挥想象力啦。 梦油 发表于 2022-6-3 17:31
发挥想象力啦。
是啊。 加林森 发表于 2022-6-3 11:54
放另外的地方我感觉不好看的。
放身上更不好啊。 红影 发表于 2022-6-3 21:51
放身上更不好啊。
在腰部不好嘛？
页:
[1]