滚珠播放器

马黑黑 发表于 2022-5-31 19:10

马黑黑 发表于 2022-5-31 19:12

本帖最后由马黑黑于 2022-5-31 21:50 编辑

<style>
.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 20px; 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">
<div class="wrap"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/05/28/c473443c77fdddbfd96ee1abaa751895.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 19:14

本帖最后由马黑黑于 2022-5-31 19:41 编辑

说明：滚珠与音乐不关联，其意图是给帖子增添一点可观赏的动感元素。音乐的播放进度表现在滚珠容器的背景变化之上。
做帖时，需要开发的地方：

一、CSS

① .mama 选择器：它就是帖子的组织元素，即帖子内容和珠子的父容器；
② .wrap 选择器：珠子容器，其尺寸建议大于珠子宽度总和的一倍；
③ .ball 选择器：珠子基本样式。它们的背景色由JS随机赋值；
④ .ball::after：珠子伪元素，抛光作用，可不要；
⑤ 两个 keyframes 关键帧动画：珠子运行相关。珠子父容器宽度改变时请修改 translate(100px) 和 translate(-100px) 内的像素值，取值规则是珠子父容器宽度的一半；

二、HTML

帖子其它内容置于mama容器内，与珠子、音乐代码关系并列，它们不破坏珠子和音乐的代码流即可。audio标签只需修改 src 值，更换你的音频地址。

三、JS

① 珠子数量修改这个地方红色部分：

Array.from({length: 5}).forEach((ele) => ...

② 动画运行周期时长修改这个语句的红色部分，两者首位数要一致：

ball.style.animation = dir + ' 2s linear forwards';

let timer = setTimeout(ballgo, 2000);

红影发表于 2022-5-31 19:55

这个有趣，那个珠子容器也是进度条呢。黑黑开发出这么多好玩的{:4_187:}

醉美水芙蓉 发表于 2022-5-31 20:15

小辣椒 发表于 2022-5-31 21:02

黑黑又有新的按钮出来了

加林森 发表于 2022-5-31 21:09

这个播放器还使用了杠杆原理啊。挺有意思的。{:4_199:}

马黑黑 发表于 2022-5-31 21:21

加林森发表于 2022-5-31 21:09
这个播放器还使用了杠杆原理啊。挺有意思的。

跷跷板一样，儿童节嘛

马黑黑 发表于 2022-5-31 21:21

红影发表于 2022-5-31 19:55
这个有趣，那个珠子容器也是进度条呢。黑黑开发出这么多好玩的

这个合适六一节吧

加林森 发表于 2022-5-31 21:21

马黑黑发表于 2022-5-31 21:21
跷跷板一样，儿童节嘛

嗯嗯。挺好玩的。

马黑黑 发表于 2022-5-31 21:22

醉美水芙蓉发表于 2022-5-31 20:15
这个又是一个小巧的播放器！

小而美是我的追求{:4_170:}

马黑黑 发表于 2022-5-31 21:22

小辣椒发表于 2022-5-31 21:02
黑黑又有新的按钮出来了

这个有点意思吧？

马黑黑 发表于 2022-5-31 21:23

加林森发表于 2022-5-31 21:21
嗯嗯。挺好玩的。

给小盆友们玩玩

加林森 发表于 2022-5-31 21:25

马黑黑发表于 2022-5-31 21:23
给小盆友们玩玩

我去玩玩。

马黑黑 发表于 2022-5-31 21:26

加林森发表于 2022-5-31 21:25
我去玩玩。

好，体验一下节日的快乐

梦油发表于 2022-5-31 21:31

有新意，有新意！

加林森 发表于 2022-5-31 21:42

马黑黑发表于 2022-5-31 21:26
好，体验一下节日的快乐

制作出来了。{:4_170:}

马黑黑 发表于 2022-5-31 21:51

加林森发表于 2022-5-31 21:42
制作出来了。

我的代码重新封装了，有小范围变更，你重新完整复制一下JS部分的

马黑黑 发表于 2022-5-31 21:52

梦油发表于 2022-5-31 21:31
有新意，有新意！

儿童节，儿童心

加林森 发表于 2022-5-31 22:04

马黑黑发表于 2022-5-31 21:51
我的代码重新封装了，有小范围变更，你重新完整复制一下JS部分的

嗯嗯。谢谢老黑！

页: [1] 2

花潮论坛's Archiver

滚珠播放器