CSS3-loading动画（四）

图片看的效果然是不行，仍是戳下面网址看吧

在线示例：http://liyunpei.xyz/loading.html

十7、效果十七

 

三个小球，纵向居中，间距撑开，依次改变小球的translateY的值便可。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

十8、效果十八

 

三个小球，横纵方向上均居中，经过外边距撑开小球之间的距离，从效果上看是左右两边的两个小球在围绕中间小球作环绕运动，那么咱们能够直接让小球的父元素来旋转，来达到两边小球的环绕效果（父元素旋转的时候，由于圆形，因此中间小球看不出是在旋转，而且中间的位置也不会改变，从视觉上看，中间小球没有作任何变化）。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

十9、效果十九

 

一共五个小球，每个小球执行的动画都同样，只是每一个小球的动画延迟时间不一样，而使小球的位置不一样，将五个小球定位至同一个位置做为统一块儿点（这里，我是将五个小球统必定位至最右边）

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}
@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点
      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

二10、效果二十

 

共八个小球，定位围成一个圆，改变小球的宽度、高度便可（要保持小球改变的是以小球的圆心为基准）

{animation: load_ball 1.6s linear infinite;}
@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

（50%-80%小球维持宽度、高度保持0，造成了一半显示，一半隐藏的效果）

二11、效果二十一

 

一共三个小球，每一个小球的运动轨迹依然是相同的，这里，我将三个小球的中心定位到纵向顶部，横向中心，而后分三个阶段，先运动到右下角，再到左下角，最后返回起点。

（在每个阶段接近中间的时间点，加上了透明度的改变）

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

二12、效果二十二

 

这相似于一个旋转的齿轮，关键是如何作出一个齿轮的形状来，一个div给实现边框作里面的圆，给div的伪类虚线边框作外面的锯齿，伪类的边框越宽，锯齿越稀松，反之，越密集。

作出来齿轮了，就剩下旋转的小case了。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

 

今天的分享结束，明天周五，再来一波，撒花完结