加林森 发表于 2022-6-2 09:42

《一溪云》 （根据老黑的教程制作）


<style>

.outer { left: -342px; width: 1280px; height: 720px; display: flex; justify-content: center; align-items: center; background: tan url('https://pic.imgdb.cn/item/629814c40947543129a387c4.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://music.163.com/song/media/outer/url?id=864100198.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 09:42

@马黑黑

小辣椒 发表于 2022-6-2 11:01

发现加分后小圆不转了，刷新可以了，就想看看这个小圆转动的规律是怎么样的

小辣椒 发表于 2022-6-2 11:15

队长速度的，现在套用代码很溜了{:4_187:}

小辣椒 发表于 2022-6-2 11:16

我现在还没有明白黑黑这个按钮加小圆滚动的特别意思

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

小辣椒 发表于 2022-6-2 11:01
发现加分后小圆不转了，刷新可以了，就想看看这个小圆转动的规律是怎么样的

嗯嗯。就是刷新才行。

加林森 发表于 2022-6-2 11:37

小辣椒 发表于 2022-6-2 11:15
队长速度的，现在套用代码很溜了

是的，我还想修改颜色的。

加林森 发表于 2022-6-2 11:38

小辣椒 发表于 2022-6-2 11:16
我现在还没有明白黑黑这个按钮加小圆滚动的特别意思

这个是太阳与地球在运转的规律吧。

小辣椒 发表于 2022-6-2 11:42

加林森 发表于 2022-6-2 11:38
这个是太阳与地球在运转的规律吧。

我开始以为随音乐的高低而变化的

加林森 发表于 2022-6-2 11:44

小辣椒 发表于 2022-6-2 11:42
我开始以为随音乐的高低而变化的

不是。老黑讲解时说得很清楚的。就是太阳与地球的公转与自转的。

马黑黑 发表于 2022-6-2 12:14

小辣椒 发表于 2022-6-2 11:01
发现加分后小圆不转了，刷新可以了，就想看看这个小圆转动的规律是怎么样的

论坛JS异步提交的数据刷新问题，基本无法克服

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

队长套用得真快，这个制作很漂亮{:4_187:}

加林森 发表于 2022-6-2 15:37

红影 发表于 2022-6-2 14:55
队长套用得真快，这个制作很漂亮

谢谢红影。{:4_204:}

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

加林森 发表于 2022-6-2 15:37
谢谢红影。

队长是最勤奋的一个，很赞{:4_187:}

加林森 发表于 2022-6-2 21:23

红影 发表于 2022-6-2 21:15
队长是最勤奋的一个，很赞

都是闲惹出来的。。。。{:4_170:}

红影 发表于 2022-6-3 19:13

加林森 发表于 2022-6-2 21:23
都是闲惹出来的。。。。

这个场景很悠远，非常漂亮{:4_187:}

加林森 发表于 2022-6-3 19:17

红影 发表于 2022-6-3 19:13
这个场景很悠远，非常漂亮

是的，看着有点意思的。
页: [1]
查看完整版本: 《一溪云》 （根据老黑的教程制作）