本文正在参加「金石方案 . 瓜分6万现金大奖」

跳动小球加载动画

在网页开发中，加载动画是必不可缺的一个规划；因为在一些资源加载的时分需要让用户等待一段时间，为了运用户有更好的交互体验，一个使人身心愉悦的加载动画变必不可少。

今天为咱们带来的便是一个小求跳动加载动画

作用图

运用纯html与css完成跳动小球加载动画

就如作用图上面多兵士出来的，咱们大致能够分为两部分：一部分是上面的灯，另一部分则是下面跳动的小球。

规划思路也很简单，上面的小灯打下来的灯火，使得下面下面跳动的小球有必定的暗影，而且根据小球间隔灯的间隔远近，其暗影也随之改变。

完成

话不多说，直接开始通过代码完成，这是一个纯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%;
}

最后灯火的作用就出来了：

运用纯html与css完成跳动小球加载动画

小球部分

接下来便是小球的跳动部分，在这儿咱们运用一个稍大的长方形盒子，将三个小球放在盒子顶部，并设置必定间距，在盒子下面咱们设置三个暗影。

<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，不仅能够给我带来趣味，也在无形之中让我进一步巩固了知识。