马黑黑 发表于 2022-6-2 07:49

地球带月亮+meter播放器

<style>

.outer { margin: auto; width: 760px; height: 560px; display: flex; justify-content: center; align-items: center; background: #ccc; position: relative; }
.stage { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; }
.stage meter { width: 200px; transform: rotate(-90deg); }
.ball { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(120deg, #778899,#ffcc00); display: flex; justify-content: center; align-items: center;z-index: 99; }
.ball::before{ position: absolute; content: ''; width: 10px; height: 10px; 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://music.163.com/song/media/outer/url?id=407677562.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>

马黑黑 发表于 2022-6-2 07:49

<style>

.outer { margin: auto; width: 760px; height: 560px; display: flex; justify-content: center; align-items: center; background: #ccc; position: relative; }
.stage { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; }
.stage meter { width: 200px; transform: rotate(-90deg); }
.ball { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(120deg, #778899,#ffcc00); display: flex; justify-content: center; align-items: center;z-index: 99; }
.ball::before{ position: absolute; content: ''; width: 10px; height: 10px; 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://music.163.com/song/media/outer/url?id=407677562.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>


马黑黑 发表于 2022-6-2 07:50

占位

红影 发表于 2022-6-2 14:38

我一直以为是太阳带地球呢，原来是地球带着月亮{:4_173:}

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

红影 发表于 2022-6-2 14:38
我一直以为是太阳带地球呢，原来是地球带着月亮

太阳不是这个颜色。地球现在树少了，是这个颜色

红影 发表于 2022-6-2 21:21

马黑黑 发表于 2022-6-2 17:41
太阳不是这个颜色。地球现在树少了，是这个颜色

原来还有这样的说法{:4_189:}

马黑黑 发表于 2022-6-2 21:22

红影 发表于 2022-6-2 21:21
原来还有这样的说法

都是充分考证过的

红影 发表于 2022-6-3 15:36

马黑黑 发表于 2022-6-2 21:22
都是充分考证过的

取的颜色，竟然考虑这么多{:4_173:}

马黑黑 发表于 2022-6-3 15:38

红影 发表于 2022-6-3 15:36
取的颜色，竟然考虑这么多

嗯，需要考虑的因素是很多的，就看照顾的过来木有。像人教出版社就没有我那样的精神，所以出大错了
页: [1]
查看完整版本: 地球带月亮+meter播放器