马黑黑 发表于 2022-6-1 20:30

太阳背后

<style>

.outer { left: -342px; width: 1280px; height: 720px; display: flex; justify-content: center; align-items: center; background: tan url('/data/attachment/forum/202206/01/202742ecjkgygjgchyhhqz.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=1941794406.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-1 20:57

加林森 发表于 2022-6-1 21:34

老黑又换播放器啦。这个也很漂亮，歌曲也好听，很有气势。图片经过这个播放器展示得更加漂亮了。{:4_199:}

红影 发表于 2022-6-1 22:14

漂亮，场景壮阔。那个变色进度条还有地球围着太阳转，太阳自转都用上了{:4_173:}

加林森 发表于 2022-6-1 23:01

明天来学习，谢谢老黑啦！{:4_191:}

马黑黑 发表于 2022-6-1 23:14

红影 发表于 2022-6-1 22:14
漂亮，场景壮阔。那个变色进度条还有地球围着太阳转，太阳自转都用上了

元素看上去还是简单的

马黑黑 发表于 2022-6-1 23:14

醉美水芙蓉 发表于 2022-6-1 20:57
欣赏黑黑老师新作品！

{:5_108:}

马黑黑 发表于 2022-6-1 23:14

加林森 发表于 2022-6-1 23:01
明天来学习，谢谢老黑啦！

{:5_108:}

马黑黑 发表于 2022-6-1 23:15

加林森 发表于 2022-6-1 21:34
老黑又换播放器啦。这个也很漂亮，歌曲也好听，很有气势。图片经过这个播放器展示得更加漂亮了。

还行吧

加林森 发表于 2022-6-1 23:16

马黑黑 发表于 2022-6-1 23:14


明天早上见。

加林森 发表于 2022-6-1 23:18

马黑黑 发表于 2022-6-1 23:15
还行吧

很漂亮的，明天来学习。老黑晚安，我这几天有点累。养老院那里出了问题，我得跑养老院。

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

加林森 发表于 2022-6-1 23:18
很漂亮的，明天来学习。老黑晚安，我这几天有点累。养老院那里出了问题，我得跑养老院。

辛苦

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

红影 发表于 2022-6-1 22:14
漂亮，场景壮阔。那个变色进度条还有地球围着太阳转，太阳自转都用上了

随便玩玩

加林森 发表于 2022-6-2 07:46

马黑黑 发表于 2022-6-1 23:14


{:4_190:}

加林森 发表于 2022-6-2 07:46

马黑黑 发表于 2022-6-2 07:24
辛苦

老黑早晨好！

小辣椒 发表于 2022-6-2 10:41

黑黑这个播放器移动位置不能一步到位吧

小辣椒 发表于 2022-6-2 10:43

大小圆都会随音乐而变化位置

小辣椒 发表于 2022-6-2 10:46

音标颜色也是会变

小辣椒 发表于 2022-6-2 10:47

黑黑，这2小圆球和播放器按钮不是一体？

小辣椒 发表于 2022-6-2 10:55

看了3遍，一面看小圆变化，一面听音乐的高低度.黑黑你这个构思是小圆随音乐而上下变化还是什么特殊的css调整的效果？
页: [1] 2
查看完整版本: 太阳背后