【童心飞扬】《幸福拍手歌》- 宝宝巴士

加林森

<style>
.wrap {
        left: -20px;
        width: 800px; height: 463px;
        background: teal url('https://pic.imgdb.cn/item/6295ada509475431291eb318.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=566442175.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 14:11
和采蘑菇的小姑娘是同样类型的帖子啊。

只要大家开心就好。

来看你

拍拍手

加林森

看看下午好！大家都来拍拍手！

转转

好听

梦油

老林带来的佳作为孩子们的节日增添了欢乐。

加林森

转转 发表于 2022-5-31 15:23
好听

嗯嗯，喜欢就好！

加林森

梦油 发表于 2022-5-31 15:36
老林带来的佳作为孩子们的节日增添了欢乐。

这些都是标准的儿歌。

梦油

加林森 发表于 2022-5-31 16:18
这些都是标准的儿歌。

很好听。

加林森

梦油 发表于 2022-5-31 16:22
很好听。

是的。

红影

加林森 发表于 2022-5-31 14:14
只要大家开心就好。

嗯嗯，很欢快的歌曲

加林森

红影 发表于 2022-5-31 21:15
嗯嗯，很欢快的歌曲

是啊，都是老儿歌，都好听的。