加林森 发表于 2022-6-1 14:48

《心如止水 降调》- 桥本环奈

本帖最后由 加林森 于 2022-6-1 17:50 编辑 <br /><br /><style>
.mama { left: -202px; width: 1000px; height: 563px; background: teal url('https://pic.imgdb.cn/item/6297098409475431298d7a5e.jpg') no-repeat; box-shadow: 2px 2px 4px #60419b; position: relative; }
.mama::before, .mama::after { position: absolute; content: ''; width: 100px; height: 100px; left: 20px; top: 20px; border-radius: 50%; background: white; }
.wrap { left: 580px; top: 520px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: tan;#60419b background-image: linear-gradient(rgba(255,0,0,.25), rgba(255,0,0,.15)); background-repeat: no-repeat; background-size:0% 100%; position: absolute; display: flex; cursor: pointer; }
.ball { position: relative; width: 20px; height: 20px; border-radius: 50%;#60419b display: block; }
.ball::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%;#60419b background: radial-gradient(at 35% 40%, rgba(255,0,0,.5), rgba(255,0,0,.6)); }
@keyframes goRight { from { transform: translate(0) rotate(0); } to {transform: translate(100px) rotate(1turn); } }
@keyframes goLeft { from { transform: translate(100px) rotate(0); } to {transform: translate(0) rotate(-1turn); } }

</style>

<div class="mama">
        <div class="wrap"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1938150848.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let step = -1, dir = 'goRight';
let gcolor = () => '#' + Math.random().toString(16).substr(-6), prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 5}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.setAttribute('style','background: linear-gradient(120deg, ' +gcolor() + ', ' + gcolor() + ')');
        wrap.appendChild(ele);
});

let ball = document.querySelectorAll('.ball'), total = ball.length;

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

function ballgo() {
        total = total + step;
        if(total < 0) {
                step = 1;
                total = 0;
                dir = 'goLeft';
        }
        if(total >= ball.length) {
                step = -1;
                total = ball.length - 1;
                dir = 'goRight';
        }
        ball.style.animation = dir + ' 2s linear forwards';
        wrap.style.transform = dir == 'goRight'? 'rotate(1deg)' : 'rotate(-1deg)';
        let timer = setTimeout(ballgo, 2000);
}

aud.addEventListener('timeupdate', () => wrap.style.backgroundSize = prog(aud.duration, aud.currentTime) + '%, 100%');

ballgo();

</script>

来看你 发表于 2022-6-1 15:30

哇，都好看 {:4_199:}

加林森 发表于 2022-6-1 15:43

来看你 发表于 2022-6-1 15:30
哇，都好看

嗯嗯。喜欢你多听听。

梦油 发表于 2022-6-1 16:28

画面很美，音乐震撼，彩条增色不少。

         {:4_199:}

加林森 发表于 2022-6-1 17:15

梦油 发表于 2022-6-1 16:28
画面很美，音乐震撼，彩条增色不少。

是的

小辣椒 发表于 2022-6-1 17:30

队长速度很快啊{:4_187:}

加林森 发表于 2022-6-1 17:39

小辣椒 发表于 2022-6-1 17:30
队长速度很快啊

是的，没有事情干，闲得慌。{:4_170:}

小辣椒 发表于 2022-6-1 17:41

加林森 发表于 2022-6-1 17:39
是的，没有事情干，闲得慌。

队长学习很努力哦{:4_178:}

加林森 发表于 2022-6-1 17:43

小辣椒 发表于 2022-6-1 17:41
队长学习很努力哦

必须的。我还在继续学习老黑的教程。

小辣椒 发表于 2022-6-1 17:45

加林森 发表于 2022-6-1 17:43
必须的。我还在继续学习老黑的教程。

队长加油！

加林森 发表于 2022-6-1 17:47

小辣椒 发表于 2022-6-1 17:45
队长加油！

好的好的。

马黑黑 发表于 2022-6-1 18:22

很漂亮，歌曲也有特点

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

马黑黑 发表于 2022-6-1 18:22
很漂亮，歌曲也有特点

嗯嗯，我也调整了球球的底色了。

马黑黑 发表于 2022-6-1 19:13

加林森 发表于 2022-6-1 18:27
嗯嗯，我也调整了球球的底色了。

嗯，挺好。我的设置是，很多东东是相互联系的。

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

马黑黑 发表于 2022-6-1 19:13
嗯，挺好。我的设置是，很多东东是相互联系的。

嗯嗯，我慢慢学习就行了。

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

加林森 发表于 2022-6-1 19:16
嗯嗯，我慢慢学习就行了。

贵在坚持

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

马黑黑 发表于 2022-6-1 20:32
贵在坚持

嗯嗯。

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

加林森 发表于 2022-6-1 21:27
嗯嗯。

{:5_108:}

加林森 发表于 2022-6-2 20:28

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


{:5_108:}
页: [1]
查看完整版本: 《心如止水 降调》- 桥本环奈