加林森 发表于 2022-5-31 13:07

【童心飞扬】《采蘑菇的小姑娘》- 宝宝巴士


<style>
.wrap {
      left: -20px;
      width: 800px; height: 463px;
      background: teal url('https://pic.imgdb.cn/item/6295a16f0947543129108697.jpg') no-repeat center/cover;
      position: relative;
}
.circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px; height: 80px;
      left: 10px; bottom: 10px;
      border: solid 6px transparent;
      border-radius: 50%;
      background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
      background-origin: border-box;
      background-clip: content-box, border-box;
      cursor: pointer;
      font: normal 14px sans-serif;
      position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
      position: absolute; width: 2px; height: 50%;
      bottom: 50%; background: rgba(200,20,20,.45);
      transform-origin: bottom;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat

center/cover;
      opacity: .55;
      left:30px; top: 20px;
}
</style>

<div class="wrap">
      <div class="circle" data-per="0%">
                <div class="hand"></div>
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=566443170.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
      task = aud.duration;
      current = aud.currentTime;
      setProgress(task,current);
});

circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
      if(tt <= 0 || cc <= 0) return false;
      let prog = 100 * cc / tt;
      hand.style.transform = `rotate(${360*prog/100}deg`;
      circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

加林森 发表于 2022-5-31 13:07

采蘑菇的小姑娘 - 宝宝巴士

采蘑菇的小姑娘背着一个大竹筐
清早光着小脚丫走遍树林和山岗
她采的蘑菇最多
多得像那星星数不清
她采的蘑菇最大
大得像那小伞装满筐
噻箩箩箩箩箩哩噻箩哩噻
噻箩箩箩箩箩哩噻箩哩噻
噻箩箩哩噻箩箩哩噻箩箩哩噻箩箩哩噻箩箩箩哩噻
谁不知山里的蘑菇香
她却不肯尝一尝
攒到赶集的那一天
快快背到集市上
换上一把小镰刀
再换上几块棒棒糖
和那小伙伴一起
把劳动的幸福来分享
噻箩箩哩噻箩箩哩噻
噻箩箩哩噻箩箩哩噻
噻箩箩箩噻箩箩箩噻箩箩箩噻箩箩箩噻箩哩箩哩箩哩箩哩噻
箩噻

红影 发表于 2022-5-31 13:47

采蘑菇的小姑娘，采来蘑菇做蘑菇汤{:4_173:}

加林森 发表于 2022-5-31 14:02

红影 发表于 2022-5-31 13:47
采蘑菇的小姑娘，采来蘑菇做蘑菇汤

儿童节快乐！

转转 发表于 2022-5-31 15:32

制作太靓了，只有这样美的画面，才和这样清亮的歌配一起{:4_199:}{:4_199:}{:4_199:}

梦油 发表于 2022-5-31 15:34

听不出来这是谁唱的，不过，这支歌曲是很好听的，欢快、活泼也很诙谐，很可爱。

加林森 发表于 2022-5-31 16:19

转转 发表于 2022-5-31 15:32
制作太靓了，只有这样美的画面，才和这样清亮的歌配一起

转转喜欢就好！{:4_204:}

加林森 发表于 2022-5-31 16:20

梦油 发表于 2022-5-31 15:34
听不出来这是谁唱的，不过，这支歌曲是很好听的，欢快、活泼也很诙谐，很可爱。

都是小宝贝唱的。

梦油 发表于 2022-5-31 16:22

加林森 发表于 2022-5-31 16:20
都是小宝贝唱的。

原来如此。

加林森 发表于 2022-5-31 16:23

梦油 发表于 2022-5-31 16:22
原来如此。

是的。

来看你 发表于 2022-5-31 16:24

想喝蘑菇汤 {:5_106:}

加林森 发表于 2022-5-31 16:38

来看你 发表于 2022-5-31 16:24
想喝蘑菇汤

可以啊，自己去踩。{:4_189:}

来看你 发表于 2022-5-31 16:45

加林森 发表于 2022-5-31 16:38
可以啊，自己去踩。

好像是雨后才有蘑菇，现在太阳老好了

闲言不语 发表于 2022-5-31 16:58

队长，儿童节快乐！

加林森 发表于 2022-5-31 17:00

来看你 发表于 2022-5-31 16:45
好像是雨后才有蘑菇，现在太阳老好了

是的。

加林森 发表于 2022-5-31 17:00

闲言不语 发表于 2022-5-31 16:58
队长，儿童节快乐！

不语下午好。儿童节快乐！
页: [1]
查看完整版本: 【童心飞扬】《采蘑菇的小姑娘》- 宝宝巴士