原文地址:→看过来

写在前面

(附录有源码及效果)

之前碰到一个小练习,就是用纯CSS3来写饼状的loading效果,之前着实没有写过这玩意儿,小花完全没头绪,然后参考了张鑫旭老师的CSS3实现鸡蛋饼饼状图loading等待转转转,还有些别的东西,用一种看起来有一点类似但是好像又不一样的方式完成了同样的效果,题目要求的大概就是这个样子:

开始

琢磨了一下,睡一觉起来画了个图,理顺了一下,不过感觉此图有点难意会啊啊啊啊啊,没关系,小花会在后文一点一点解释哒~(红跟粉代表颜色,斜杠后面是z-index的值)

原理

这个东西分为两部分:外圈和内圆。颜色这东西都自定义啦,不过我画的的圈圈好像有点太大,然后动画时间是随便设的,反正转起来看着感觉有点怪怪的额

先上html结构

<div class="con-wrap">

    <!--外圈-->
<div class="out-round"></div> <!--内圆,里面有半圆四个-->
<div class="in-round">
<div class="lt-round"></div>
<div class="lt-mask"></div>
<div class="rt-round"></div>
<div class="rt-mask"></div>
</div>
</div>

外圈和内圆是通过position定位重合在一起,实质上外圈转完2圈,内圆的红色和粉色才各转完1圈(内圆的全程包括红色从1到0、粉色从1到0),所以内圆的动画时间应该是外圈的两倍!!!

1.外圈

外圈很简单,设置border-radius:50%即可画出一个圆,然后设置三条边框为红色,另外一条为透明,即画出了四分之三个圆边框(即外圆)。

.out-round {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 150px auto;
border: 3px solid #FF298C;
border-left: 3px solid transparent;
animation: outRound 1s linear infinite running;
}

接下来是外圈的动画,为其设置的动画就是旋转一圈,infinite表示无限次

@keyframes outRound {
0% {
transform: rotate(120deg)
}
100% {
transform: rotate(-240deg)
}
}

其中rotate(120deg)为旋转起始位置,可根据实际情况调整。

至此外圈就完成了,比较麻烦的是下面的内圆,不过根据图示应该是可以想象的。

2.内圆

此处有四个半圆,左边两个,右边两个(round为红色,mask为粉色),动画主要通过改变两个红色半圆的z-index值来控制各个半圆显示的优先顺序。内圆的css实现部分为:

/*左边两个半圆*/
.lt-round, .lt-mask {
position: absolute;
width: 35px;
height: 70px;
border-radius: 35px 0 0 35px;
transform-origin: right center;
} /*右边两个半圆*/
.rt-round, .rt-mask {
position: absolute;
left: 50%;
width: 35px;
height: 70px;
border-radius: 0 35px 35px 0;
}

下面过程描述内圆的动画全程(其中右边的粉色全程不需要动,右边红色部分只需要改变z-index的值来改变显示的优先级,从而实现显示和隐藏的效果来配合补充左半边的圆。):

  1. 初始设置:
红左 z-index:3
粉1 z-index:2 红右 z-index:1
粉2 z-index:0

模型图:

视觉效果图(忽略中间的白线):

2.左边红色旋转完180度时(逆时针旋转所以是360→180→0)

模型图:

视觉效果图:

3.左边红色转完到0度时(此时左右两边的红色半圆被粉色覆盖)

模型图:

视觉效果图:

4.粉色半圆重复之前红色半圆的动画(即左边粉色360→180→0)

模型图:

视觉效果图:

5.当左边粉色旋转到0度时,全部半圆回到了最初始的状态,整个动画即完成(在相同时间下外圈完成了2次的动画)。

模型图:

视觉效果图:

动画代码部分

1.前半程为左边红色旋转一周,后半程为粉色旋转一周。动画实现如下:

/*左边红色完成第一圈的旋转*/
@keyframes ltRound {
0% {
transform: rotate(360deg);
}
24.9% {
z-index: 3;
}
25% {
z-index: 1;
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
74.9% {
z-index: 1;
}
75%, 100% {
z-index: 3;
}
} /*右边红色圆通过z-index来控制显示和隐藏,从而达到在适当时间配上左半圆的效果*/
@keyframes rtRound {
0%, 24.9% {
z-index: 1;
}
25% {
z-index: -3;
}
74.9% {
z-index: -3;
}
75%, 100% {
z-index: 1;
}
} /*左边粉色完成第二圈的旋转*/
@keyframes ltMask {
0%, 25%, 50% {
transform: rotate(360deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}

2.在全部代码未完成时,可以将动画时间设大一点,这样便于观察,搞完了再设回去就OK了。

3.由于动画是匀速变化的,但是z-index的值不能匀速变化,所以只能在某个很短时间内去改变z-index的值。这样才能达到效果(突然感觉这种实现好像也不是很好)

小结

  1. 没做兼容,在chrome中无异常,别的我就不太知道了
  2. 只是用来练习练习,实际上不一定会用到,但是里面几个知识点还是hei有用滴
  3. 小花是小白,对很多东西都还没整明白,欢迎大佬们指点指点~
  4. 这几个图画的我心好累,sei能给小花推荐个好用点的额

源代码

用CSS3实现饼状loading效果的更多相关文章

  1. CSS3饼状loading效果

    概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...

  2. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  3. CSS3实现10种Loading效果(转)

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

  4. CSS3实现8种Loading效果【二】

    CSS3实现8种Loading效果[二]   今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...

  5. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  6. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  7. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  8. css3纯手写loading效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. css3实现饼状图进度及环形进度条

    1 <!-- 饼图 --> <div class="pie"></div> <hr /> <!-- 环形图 --> &l ...

随机推荐

  1. Solaris的vi

    进入输入模式i: 在光标之前插入a: 在光标之后插入o: 在下面新建一行输入I: 光标移动到本行首插入A: 光标移动到本行末尾插入O: 在上面新建一行输入 移动光标M:移到屏幕中间一行的行首L:移到屏 ...

  2. 利用.htacess 实现重定向

    步骤: 在网站目录下加入 .htaccess 文件中写 RewriteEngine On RewriteRule ^.*$ index.php 表示开启重写机制 重写到 index.php 的文件

  3. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  4. SRM 581 D2 L2:SurveillanceSystem,重叠度

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12588 在判断 ‘+’ 的时候使用了 重叠度 的概念,跟一般的 ...

  5. android内存的一点优化

    android手机给应用分配的内存通常是8兆左右,如果处理内存处理不当很容易造成OutOfMemoryError,我们的产品出现最多的错误也是OutOfMemoryError的异常, 在解决这个异常时 ...

  6. CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

    拖曳原理: 元素的初始位置 + 鼠标距离差 = 元素最终位置 使元素可以拖动 function dragElement(obj){ obj.onmousedown = function(e){ e = ...

  7. 了解的CAP和BASE等理论

    CAP,BASE和最终一致性是NoSQL数据库存在的三大基石.而五分钟法则是内存数据存储的理论依据.这个是一切的源头. 几个名词解释: 网络分区:俗称“脑裂”.当网络发生异常情况,导致分布式系统中部分 ...

  8. Linux使用——Linux命令——Linux 系统基本命令使用记录

    查看系统版本信息 查看系统版本:cat /proc/version 查看cpu相关信息,包括型号.主频.内核信息:cat /proc/cpuinfo 快速了解CPU使用情况:free -h 解压文件 ...

  9. VS2010/MFC编程入门之三十六(工具栏:工具栏资源及CToolBar类)

    上一节中鸡啄米讲了菜单及CMenu类的使用,这一节讲与菜单有密切联系的工具栏. 工具栏简介 工具栏一般位于主框架窗口的上部,菜单栏的下方,由一些带图片的按钮组成.当用户用鼠标单击工具栏上某个按钮时,程 ...

  10. hdu-6301-贪心

    Distinct Values Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...