小辣椒 发表于 2022-8-4 21:51

【中伏消暑】第十一天【池】捉泥鳅


<style>
.mama { left: -202px; width: 1000px; height: 750px; top:150px; background: teal url('https://pic.imgdb.cn/item/62ea312c16f2c2beb1230a0a.jpg') no-repeat; box-shadow: 2px 2px 4px #333; position: relative; }
.mama::before, .mama::after { position: absolute; content: ''; width: 80px; height: 80px; left: 100px; top: 120px; border-radius: 50%; background: Silver; }
.wrap { left: 400px; top: 550px; 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=494858199" 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>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-4 21:52

又完成一天{:4_173:}

小辣椒 发表于 2022-8-4 21:53


专 辑：校园青春乐

歌 手：卓依婷

公 司：海丽集团

发行时间：1997-09-07

【池】塘里水满了 雨也停了

田边的稀泥里到处是泥鳅

天天我等着你 等着你捉泥鳅

大哥哥 好不好咱们去捉泥鳅

小牛的哥哥 带着他捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

【池】塘里水满了 雨也停了

田边的稀泥里 到处是泥鳅

天天我等着你 等着你捉泥鳅

大哥哥 好不好咱们去捉泥鳅

小牛的哥哥 带着他捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

大哥哥 好不好 咱们去捉泥鳅

大哥哥 好不好 咱们去捉泥鳅


小辣椒 发表于 2022-8-4 21:53

可以休息一天了。。。。。。。

青青子衿 发表于 2022-8-4 22:13

小辣椒，咱为友友辛苦得付出，点赞~！{:4_204:}这个歌好听~！

红影 发表于 2022-8-4 22:31

这个画面设计好看，还有那个天平呢。亲爱的制作漂亮{:4_199:}

醉美水芙蓉 发表于 2022-8-4 22:49

浣溪沙 发表于 2022-8-5 07:26

好听好看，多看一会，多听一会{:4_178:}

小星世龙 发表于 2022-8-5 07:56



制作精彩，漂亮！
页: [1]
查看完整版本: 【中伏消暑】第十一天【池】捉泥鳅