跳动小球加载动画
在网页开发中，加载动画是必不可缺的一个设计；因为在一些资源加载的时候需要让用户等待一段时间，为了使用户有更好的交互体验，一个使人身心愉悦的加载动画变必不可少。
今天为大家带来的就是一个小求跳动加载动画
效果图
就如效果图上面多战士出来的，我们大致可以分为两部分：一部分是上面的灯，另一部分则是下面跳动的小球。
设计思路也很简单，上面的小灯打下来的灯光，使得下面下面跳动的小球有一定的阴影，并且根据小球距离灯的距离远近，其阴影也随之变化。
实现
话不多说，直接开始通过代码实现，这是一个纯html与css实现的动画，不需要任何js。
灯光部分
灯光部分我使用了一个div将灯和灯光包裹起来，这样做为了方便调整位置，同时也可以方便的调整灯光的大小。
<div class="lightBox"> <div class="light"></div>// 灯泡 <div class="lampLight"></div>// 灯光 </div> 复制代码
灯光主题很简单，这里就不多说了。
下面就是样式部分：
我的设计思路是这样的：灯泡部分设置一个宽高，然后使用border-radius，使得灯泡呈现一个圆形。然后灯光我们使用一个盒子，设置一个宽高，然后使用border-radius，使得灯光呈现一个圆形，但是灯光这个盒子的大小比灯泡的盒子大得多，这样就可以使得灯光有一定的阴影效果。
我们将整个灯光的大盒子居中，但不是垂直居中，因为下面还有一个跳动的小球。
.lightBox{ position: absolute; top: 20%; left: 50%; } .light{ position: absolute; top: 50px; left: 50%; margin-left: -10px; width: 20px; height: 20px; background-color: rgb(249, 159, 4); border-radius:50%; z-index: 1; } .lampLight{ position: absolute; top: 16%; left: 50%; margin-left: -60px; width: 20px; height: 20px; border-bottom: 50px solid rgb(251, 232, 124); border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-radius: 50%; } 复制代码
最后灯光的效果就出来了：
小球部分
接下来就是小球的跳动部分，在这里我们使用一个稍大的长方形盒子，将三个小球放在盒子顶部，并设置一定间距，在盒子下面我们设置三个阴影。
<div class="father"> <!-- 加载小球 --> <div class="ball1"></div> <div class="ball2"></div> <div class="ball3"></div> <!-- 小球阴影 --> <div CLASS="ballShadow1"></div> <div CLASS="ballShadow2"></div> <div CLASS="ballShadow3"></div> </div> 复制代码
然后我们设置一下样式：
首先就是整个大盒子的样式，我们给这个大盒子设置150px的宽度,70px高度，然后设置一个背景颜色，这样就可以看到这个大盒子的位置了。
但是后期我们并不需要这个背景颜色，此时设置背景颜色只是为了更好的观察。
.father{ position: absolute; /* 居中 */ top:50%; margin-top: -50px; left: 50%; margin-left: -80px; /* 设置长宽 */ width: 160px; height: 70px; /* 背景色 */ /* background-color: #ccc; */ } 复制代码
接下来就是给小球设置一些样式，我们给小球设置一个宽高，然后设置一个背景颜色，这样就可以看到小球的位置了，前面我们还说到要讲小球均匀分布，所以这里还需要设置一些外边距。
.ball1{ position: absolute; width: 20px; height: 20px; background-color: #0ff; left: 10px;// **1 border-radius: 50%; z-index: 1; animation: bounce 2s ease-in-out infinite;// **2 animation-delay: 0s;// **3 } 复制代码
上面的代码只是第一个小球的样式,我们可以看到，在第一个小球上面我们设置小球的位置，但是每一个小球的位置都不一样，所以我这样设置：第一个小球左边距为10px,后面的每个小球依次比前一个小球多60px。这里我就不重复写了。
然后我们设置小球的动画，这里我们使用的是CSS3的动画，我们设置一个动画名字为bounce，动画时间为2s，动画的效果为ease-in-out，动画的次数为无限次。
然后我们设置小球的动画延迟，这里我们设置第一个小球的动画延迟为0s，第二个小球的动画延迟为0.5s，第三个小球的动画延迟为1s。
接下来我们为小球设置动画：
@keyframes bounce{ 0%{ top: 0px; } 50%{ top: 40px; } 100%{ top:0px; } } 复制代码
阴影部分
在效果图里面还有小球跳动的阴影，这里我们也给小球设置一个阴影，在父盒子下面设置三个盒子，长宽比例为2：1，然后设置一个背景颜色，边框使用border-radius:50%,这样就可以看到阴影的位置了。
.ballShadow1{ position: absolute; bottom: 2px; left: 0px; width: 40px; height: 20px; border-radius: 50%; background-color: #ededed; animation: box_shadow 2s ease-in-out 0s infinite; } 复制代码
同样的，我这里展示的是第一个小球跳动的阴影。我们可以看到，阴影的位置是在小球的下面，所以我们设置了bottom: 2px;，然后我们设置了一个动画，动画的名字为box_shadow，动画的时间为2s，动画的效果为ease-in-out，动画的延迟为0s，动画的次数为无限次。
后面的两个小球只需要设置一下位置就可以了，这里我就不重复写了。
接下来我们设置阴影的动画：
在日常生活中物体距离光源的距离会引起物体的阴影变化（大小，颜色深浅），我们这里使用缩放来实现阴影大小的变化，使用设置深一点的颜色来体现颜色的变化。
@keyframes box_shadow { 0%{ transform: scale(1,1); background-color: #ededed; } 50%{ transform: scale(0.5,0.5); background-color: #999999; } 100%{ transform: scale(1,1); background-color: #ededed; } } 复制代码
结尾
这里我们就完成了一个简单的小球跳动的效果，这里我们使用了CSS3的动画，这里我们使用了@keyframes来设置动画，然后我们使用animation来设置动画的属性，这里我们使用了animation-delay来设置动画的延迟，这样我们就可以实现小球跳动的效果了。
这样一个小小的demo，不仅可以给我带来乐趣，也在无形之中让我进一步巩固了知识。
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
