论坛 › 《22年六一童心飞扬》 › 【童心飞扬】《阳光彩虹小白马》- 大张伟

加林森 发表于 2022-6-1 08:52

【童心飞扬】《阳光彩虹小白马》- 大张伟

<style>
.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 60px; top: 30px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: #fff; background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,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,255,255,.5), rgba(0,0,255,.1)); }
@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">
      <img src="https://pic.imgdb.cn/item/6296b6aa094754312934093c.jpg">
      <div class="wrap"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=551339740.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 08:52

阳光彩虹小白马 - 大张伟

作词 : 大张伟
作曲 : 大张伟
编曲：大张伟/程振兴
怎么能哭呢一切会好哒
一切都去吧你就得想着
既然没办法还恨他干嘛
还管它干嘛心里要记得

你是内内个内内
内个内个内内
内内个内内
内个内个内内
阳光彩虹小白马
滴滴哒滴滴哒

我是内内个内内
内个内个内内
内内个内内
内个内个内内
阳光彩虹小白马
滴滴哒滴滴哒

滴滴哒滴哒滴滴哒滴哒
滴滴哒滴滴哒
滴滴哒滴哒滴滴哒滴哒
滴滴哒滴滴哒嘿
你是内内个内内
内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
阳光彩虹小白马
你是最强哒最棒哒
最亮哒最发光哒
拦不住你发芽
你是最好哒最俏哒
最妙哒最骄傲哒
尽情的盛开吧
你就是最强哒最棒哒
最亮哒最发光哒
心需要你哄它
你是最好哒最俏哒
最妙哒最骄傲哒
阳光彩虹小白马

生活是笑话别哭着听它
别在意梗垮不乐是你傻
心要你哄它一切会好哒
一切都来吧天地随你耍

你是内内个内内内个内个内内
内内个内内内个内个内内
阳光彩虹小白马滴滴哒滴滴哒
我是内内个内内内个内个内内
内内个内内内个内个内内
阳光彩虹小白马滴滴哒滴滴哒
滴滴哒滴哒滴滴哒滴哒
滴滴哒滴滴哒
滴滴哒滴哒滴滴哒滴哒
滴滴哒滴滴哒嘿
你是内内个内内内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
内内个内内内个内个内个内
内内个内内内个内个内内
阳光彩虹小白马
你是最强哒最棒哒
最亮哒最发光哒
拦不住你发芽
你是最好哒最俏哒
最妙哒最骄傲哒
尽情的盛开吧
你就是最强哒最棒哒
最亮哒最发光哒
心需要你哄它
你是最好哒最俏哒
最妙哒最骄傲哒
阳光彩虹小白马
你是最强哒最棒哒
最亮哒最发光哒
拦不住你发芽
你是最好哒最俏哒
最妙哒最骄傲哒
尽情的盛开吧
你就是最强哒最棒哒
最亮哒最发光哒
心需要你哄它
你是最好哒最俏哒
最妙哒最骄傲哒
阳光彩虹小白马

转转 发表于 2022-6-1 09:22

太漂亮啦，真想做匹白马，在草原奔跑{:4_172:}

加林森 发表于 2022-6-1 09:58

转转 发表于 2022-6-1 09:22
太漂亮啦，真想做匹白马，在草原奔跑

挺好玩的小白马。

梦油 发表于 2022-6-1 10:10

小球用上啦！挺好看的。《阳光彩虹小白马》挺有趣。

俺没分了，遗憾，不能为你加分了。

                  {:4_201:}

加林森 发表于 2022-6-1 10:12

梦油 发表于 2022-6-1 10:10
小球用上啦！挺好看的。《阳光彩虹小白马》挺有趣。

俺没分了，遗憾，不能为你加分了。


没事没事，大家都是玩嘛。儿童节快乐！

红芍药 发表于 2022-6-1 12:18

这彩球滚哒漂亮，队长好制作。{:4_199:}{:4_199:}

加林森 发表于 2022-6-1 12:33

红芍药 发表于 2022-6-1 12:18
这彩球滚哒漂亮，队长好制作。

芍药儿童节快乐！{:4_204:}

东篱闲人 发表于 2022-6-1 13:32

加加小朋友真会玩！{:5_116:}

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

东篱闲人 发表于 2022-6-1 13:32
加加小朋友真会玩！

老兄也不耐的啊。。。。{:4_189:}

闲言不语 发表于 2022-6-1 13:44

兰天白云大草原！

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

闲言不语 发表于 2022-6-1 13:44
兰天白云大草原！

不语六一快乐！

闲言不语 发表于 2022-6-1 14:01

加林森 发表于 2022-6-1 13:56
不语六一快乐！

队长同乐同乐！{:4_199:}

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

闲言不语 发表于 2022-6-1 14:01
队长同乐同乐！

要得要得{:4_171:}

梦油 发表于 2022-6-1 15:59

加林森 发表于 2022-6-1 10:12
没事没事，大家都是玩嘛。儿童节快乐！

彩球为你的帖子增添了看点。

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

梦油 发表于 2022-6-1 15:59
彩球为你的帖子增添了看点。

是啊。变活了。

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

加林森 发表于 2022-6-1 16:05
是啊。变活了。

增光添彩

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

这个按钮用在这里真好。欣赏队长好帖{:4_204:}

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

梦油 发表于 2022-6-1 16:10
增光添彩

是的

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

红影 发表于 2022-6-1 16:26
这个按钮用在这里真好。欣赏队长好帖

谢谢！

查看完整版本: 【童心飞扬】《阳光彩虹小白马》- 大张伟