CSS3创造属于你的旋转loading

今天我们来做一个loading动画，如图所示。

006tNbRwly1fcr4ycdb9cg30d80dm0tf.gif

首先咱先分析一下。打眼一看，loading图分成三部分：1、外侧3/4圆弧2、内侧浅色圆饼3、内侧深色圆饼。外侧圆弧的制作，上篇文章已经说过了，您可以看这。下面我们主要来介绍圆饼及其动画的实现，详细代码您可以点这。

内侧圆饼制作

首先我们绘制一个背景圆（其实就是两个半圆拼成一个圆），然后让该圆的左右部分颜色一深一浅（这样做是为了转动方便）。然后我们在该圆上做两个半圆位于同一侧（颜色也是一深一浅）。好，上代码。
1.背景圆

 #rou {
      height: 60px;
      width: 30px;
      border-radius: 30px 0px 0 30px;
      background-color: #f99;
      position: absolute;
      z-index: 4;
  }

  #rou1 {
      height: 60px;
      width: 30px;
      border-radius: 0px 30px 30px 0;
      background-color: #f24;
      position: absolute;
      z-index: 4;
      left: 30px;
  }

效果图

1506347382(1).png

2.在背景圆上添半圆

#r {
      height: 60px;
      width: 30px;
      border-radius: 0 30px 30px 0;
      background: #f24;
      z-index: 7;
      left: 30px;
      position: absolute;

      transform-origin: left center;
      animation: r 1s infinite linear;
  }

  #l {
      height: 60px;
      width: 30px;
      border-radius: 0 30px 30px 0;
      background: #f99;
      z-index: 7;
      left: 30px;
      position: absolute;
      transform-origin: left center;
      animation: l 1s infinite linear;
  }

效果图

1506347498(1).png

注意，此处添加的两个半圆都在右侧，浅色半圆遮盖了深色半圆。

旋转

先不要着急，我们一起来分析一下下。观察发现，深浅圆交替出现。我们绘制的圆，初始化时，左侧为浅色（仅一个，没有覆盖其他半圆），右侧为深深浅（浅覆盖深）。好的记住这个颜色位置，那么我们这样来做。1、首先深色半圆（非背景圆）从右往左转，转到-180度（逆时针为负），注意它的z-index要最大否则就被覆盖看不见了。然后保持该度数。2、现在左右两侧圆均有两种颜色（深+浅）。由于我们要先显示深色圆，所以现在浅色半圆（非背景圆）要从右至左转出，不能让它显示z-index最小，那么此时右侧的背景深半圆便会渐渐漏出视野。此时深色圆全部显示。3、现在显示浅色圆。我们再来回顾一下，现在圆的左侧为深浅浅，右侧为背景深。现在将深色半圆从左往右转-360度，z-index最小，让左侧浅圆露出。4、同理，保持右侧深半圆不变，将左侧浅半圆旋到右侧，并且z-index最大。

好了终于说完了，容我要喘口气。

1506348688(1).png

下面上代码

@keyframes r {
      0% {
          transform: rotate(0deg);
      }
      25% {

          transform: rotate(-180deg);
      }
      50% {
          transform: rotate(-180deg);
          z-index: 8;
      }
      75% {
          transform: rotate(-360deg);
          z-index: 8;
      }
      100% {
          transform: rotate(-360deg);
      }
  }

  @keyframes l {
      0% {
          transform: rotate(0deg);
      }
      25% {
          transform: rotate(0deg);
      }
      50% {
          transform: rotate(-180deg);
          z-index: 6;
      }
      75% {
          transform: rotate(-180deg);
          z-index: 8;
      }
      100% {
          transform: rotate(-360deg);
          z-index: 8;
      }
  }

最后加上外侧圆弧，就得到我们想要的loading，是不是很开心，终于弄好了。详细代码请移驾这里。
欢迎各位朋友批评指正，多多交流。

u=4277375608,2152674864&fm=11&gp=0.jpg

最后编辑于：2017.11.25 16:57:14