css loading 转动,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