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

加林森

<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:47
采蘑菇的小姑娘，采来蘑菇做蘑菇汤

儿童节快乐！

转转

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

梦油

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

加林森

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

转转喜欢就好！

加林森

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

都是小宝贝唱的。

梦油

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

原来如此。

加林森

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

是的。

来看你

想喝蘑菇汤

加林森

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

可以啊，自己去踩。

来看你

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

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

闲言不语

队长，儿童节快乐！

加林森

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

是的。

加林森

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

不语下午好。儿童节快乐！