《两只老虎爱跳舞》- 儿歌宝贝 （根据老黑的滚珠播放器制作）
本帖最后由 加林森 于 2022-6-1 08:21 编辑 <br /><br /><style>.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 260px; 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/62961a150947543129ac3f7d.jpg">
<div class="wrap"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1408561309.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-5-31 21:43
滚珠滚的不正常
杠杆原理没有出来。我再去调整。 加林森 发表于 2022-5-31 21:44
杠杆原理没有出来。我再去调整。
不急吧，是我公开的代码变成变量后出了问题，我调试一下你在去复制一下JS代码 队长真快，做的真好{:4_187:} 队长好可爱的图图，歌曲也是童趣的，黑黑的按钮，队长立马出来了{:4_178:} 马黑黑 发表于 2022-5-31 21:48
不急吧，是我公开的代码变成变量后出了问题，我调试一下你在去复制一下JS代码
好的 我看见是白条？ 加林森 发表于 2022-5-31 21:53
好的
已经调试好了，你更换一下JS部分，从 <script> 开始到 </script>，注意JS的头尾不能缺、不能重复，只有一个<script>和</script> 本帖最后由 加林森 于 2022-5-31 22:02 编辑
红影 发表于 2022-5-31 21:50
队长真快，做的真好
凡是儿童的歌曲我都喜欢。{:4_189:} 马黑黑 发表于 2022-5-31 21:54
已经调试好了，你更换一下JS部分，从开始到 ，注意JS的头尾不能缺、不能重复，只有一个和
修改好了。谢谢老黑！ 小辣椒 发表于 2022-5-31 21:53
队长好可爱的图图，歌曲也是童趣的，黑黑的按钮，队长立马出来了
小辣椒晚上好。明天是六一儿童节了，大家都快乐啊！ 播放器放在第三只老虎头顶会更活泼 啊？我再去试！ 加林森 发表于 2022-5-31 22:42
啊？我再去试！
修改 wrap 选择器的 left 和top 值可以随意定位跷跷板：
.wrap { left: 20px; top: 30px; …………
上面代码中，left值规定了调用 .wrap 选择器的元素的左边值，top值定义的是上边值 马黑黑 发表于 2022-6-1 07:54
修改 wrap 选择器的 left 和top 值可以随意定位跷跷板：
.wrap { left: 20px; top: 30px; …………
早晨好。老黑！我去调整。 加林森 发表于 2022-5-31 21:56
凡是儿童的歌曲我都喜欢。
黑黑的这个播放器这个像跷跷板，倒是适合儿童歌曲呢{:4_204:} 红影 发表于 2022-6-1 08:57
黑黑的这个播放器这个像跷跷板，倒是适合儿童歌曲呢
就是，很可爱的。{:4_189:} 加林森 发表于 2022-6-1 08:59
就是，很可爱的。
还行的
页:
[1]
2