论坛 › 欢乐水吧 › 祝小盆友们节日快乐

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

祝小盆友们节日快乐

<style>
.mama { left: -202px; width: 1000px; height: 563px; background: teal url('https://638183.freep.cn/638183/t22/51/tree.jpg') no-repeat; box-shadow: 2px 2px 4px #333; position: relative; }
.mama::before, .mama::after { position: absolute; content: ''; width: 100px; height: 100px; left: 20px; top: 20px; border-radius: 50%; background: white; }
.wrap { left: 540px; top: 520px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: tan; 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%; display: block; }
.ball::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%; 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=1939787073.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 13:15

自然公园，结清玩耍哈

加林森 发表于 2022-6-1 13:42

漂亮的制作，滚珠颜色又变化了。真美！{:4_199:}

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

清爽怡人 {:4_199:}

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

六一快乐 {:4_177:}

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

彩条随着乐曲的进度而前进，彩球随着彩条的倾斜而滚动，很具动感，很有新意。

红影 发表于 2022-6-1 16:45

滚珠的色彩配得很漂亮，非常适合六一呢{:4_199:}

红影 发表于 2022-6-1 16:46

除了滚珠，还附送一个代码太阳。黑黑好棒{:4_187:}

小辣椒 发表于 2022-6-1 16:55

还有一个大月亮

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

漂亮，黑黑一出手就是个漂亮的制作{:4_178:}

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

小辣椒 发表于 2022-6-1 17:06
漂亮，黑黑一出手就是个漂亮的制作

一般一般班里倒数第三

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

加林森 发表于 2022-6-1 13:42
漂亮的制作，滚珠颜色又变化了。真美！

变得更鲜艳一点

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

马黑黑 发表于 2022-6-1 18:11
变得更鲜艳一点

嗯嗯，我跟到你制作了几个，你帮着看看。

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

加林森 发表于 2022-6-1 18:15
嗯嗯，我跟到你制作了几个，你帮着看看。

好的

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

马黑黑 发表于 2022-6-1 18:15
好的

嗯嗯，谢谢！

转转 发表于 2022-6-2 06:47

漂亮，大气{:4_199:}{:4_199:}{:4_199:}

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

来看你 发表于 2022-6-1 15:30
六一快乐

节日好

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

来看你 发表于 2022-6-1 15:29
清爽怡人

自然的魅力

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

梦油 发表于 2022-6-1 16:24
彩条随着乐曲的进度而前进，彩球随着彩条的倾斜而滚动，很具动感，很有新意。

主要是环境好

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

红影 发表于 2022-6-1 16:45
滚珠的色彩配得很漂亮，非常适合六一呢

节日好

查看完整版本: 祝小盆友们节日快乐