论坛 › 《22年六一童心飞扬》 › 【童心飞扬】《白龙马》- 宝宝巴士

加林森 发表于 2022-5-30 13:14

【童心飞扬】《白龙马》- 宝宝巴士

<style>
.wrap {
      left: -20px;
      width: 800px; height: 463px;
      background: teal url('https://pic.imgdb.cn/item/62945118094754312999e333.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=566443168.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-30 13:16

本帖最后由 加林森 于 2022-5-30 13:17 编辑

白龙马-宝宝巴士

白龙马 蹄朝西
驮着唐三藏跟着仨徒弟
西天取经上大路
一走就是几万里
什么妖魔鬼怪
什么美女画皮
什么刀山火海
什么陷阱诡计
什么妖魔鬼怪
什么美女画皮
什么刀山火海
什么陷阱诡计
都挡不住火眼金睛的如意棒
护送师徒朝西去
白龙马 脖铃儿急
颠簸唐玄奘小跑仨兄弟
西天取经不容易
容易干不成大业绩
什么魔法狠毒
自有招数神奇
八十一难拦路
七十二变制敌
什么魔法狠毒
自有招数神奇
八十一难拦路
七十二变制敌
师徒四个斩妖
斗魔同心合力
邪恶打不过正义

什么魔法狠毒
自有招数神奇
八十一难拦路
七十二变制敌
什么魔法狠毒
自有招数神奇
八十一难拦路
七十二变制敌
师徒四个斩妖
斗魔同心合力
邪恶打不过正义
邪恶打不过正义

来看你 发表于 2022-5-30 15:10

宝宝巴士，白龙马 {:4_199:}

小九 发表于 2022-5-30 15:45

白龙马有好多回忆呢{:4_187:}

转转 发表于 2022-5-30 15:54

好听好看{:4_199:}{:4_199:}{:4_199:}

加林森 发表于 2022-5-30 16:13

来看你 发表于 2022-5-30 15:10
宝宝巴士，白龙马

好听吧。

加林森 发表于 2022-5-30 16:14

小九 发表于 2022-5-30 15:45
白龙马有好多回忆呢

小九下午好。老歌好听的。

加林森 发表于 2022-5-30 16:15

本帖最后由 加林森 于 2022-5-30 17:24 编辑

转转 发表于 2022-5-30 15:54
好听好看
这就对了嘛。

梦油 发表于 2022-5-30 17:22

孩子们保准喜欢。

加林森 发表于 2022-5-30 17:24

梦油 发表于 2022-5-30 17:22
孩子们保准喜欢。

应该会喜欢的。

来看你 发表于 2022-5-31 10:38

加林森 发表于 2022-5-30 16:13
好听吧。

很好听，，经典的 {:4_204:}

加林森 发表于 2022-5-31 10:46

来看你 发表于 2022-5-31 10:38
很好听，，经典的

嗯嗯，这些歌曲陪伴我们了许多年的。

查看完整版本: 【童心飞扬】《白龙马》- 宝宝巴士