上次简单的介绍了下如何用代码实现菊花旋转的加载动画，动画点击，这次继续我们的动画系列，实现另外一种加载动画，圆环旋转。与上次不同的是，菊花旋转是通过改变元素透明度来实现动画，这次因为考虑到元素叠加，加上元素本身带有背景色，如果改变透明度会影响效果，所以直接改变元素的背景颜色，加上适当的延时，就可以实现这种圆环的效果。动画实现的根本原理就是将每个需要变化的元素以及变化的过程分离出来。

所有的动画在chrome中调试，未考虑到兼容性以及性能问题，只是单纯的介绍如何实现效果。如果有更好的方法会及时更新。

1.先看gif图

2.代码实现思路

实现这个动画关键点在于如何将每个变化的元素分离出来，并且实现这个圆环效果。用图片说明下：

2.1 先定义元素容器，元素的两块内容宽度为50%，绝对定位，距离左侧50%，这样是方便内容绕着元素中心旋转。

2.2 每个子元素定义左边框，边框的颜色和外层容器的背景色相同，这样有镂空的感觉，注意的是子元素需左移边框一半的宽度，确保容器的中心为边框的中心，不然子元素旋转的时候会有误差。

2.3 定义每个子元素旋转的度数，打造出扇形的形状，最后拼成右边圆的形状。

2.4 将右边圆的所有子元素复制，旋转180度，拼出左边圆的形状，此时左边圆的子元素会覆盖右边的形状，所以要使用clip进行裁切，只显示左边圆的部分。这时构成一个完整的圆的所有元素就齐了，显示如2.5.

2.6 此时元素的形状还不是标准的圆，在元素上覆盖与背景同色的圆，然后外层容器使用border-radius形成一个正圆，这时整个元素显示为环形形状。

2.7 定义动画的关键帧，并用在每个子元素上。这个动画就是改变每个子元素的背景色，顺时针延迟动画的开始时间，最终就形成了gif图中的显示方式。

3. 主要使用的技术

这个动画其实并不复杂，也没用到多深奥的技术，主要还是使用了transform和animation属性，这里不详细解释使用用法了。

另外还用到clip属性，控制元素的显示范围，裁剪绝对定位元素。这个属性定义一个裁剪矩形，在这个矩形范围内的元素才可见。

使用方法：clip:rect(0px,16px,32px,1px);

四个有效值为：rect (top, right, bottom, left)

4. 源代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title>CSS3实现加载的动画效果2</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's css lib" />

 <meta name="description" content="CSS3" />

 <style>

 *{margin:0;padding:0;}

 body{background:#e7e7e7;}

 .m-load,.m-load2{width:32px;height:32px;margin:100px auto;}

 .m-load{background:url('load.gif') center center no-repeat;}

 /** 加载动画的静态样式 **/

 .m-load2{position:relative;border-radius:32px;overflow:hidden;}

 .m-load2 .box,.m-load2 .item{position:absolute;left:50%;top:0;width:50%;height:100%;}

 .m-load2 .item{left:0;width:100%;-webkit-transform-origin:left center;}

 .m-load2 .item:before{content:'';position:absolute;left:-1px;top:0;width:100%;height:100%;background:#444;border-left:2px solid #e7e7e7;}

 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}

 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}

 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);}

 .m-load2 .item:nth-child(5){-webkit-transform:rotate(180deg);}

 .m-load2 .box:nth-child(2){-webkit-transform:rotate(180deg);-webkit-transform-origin:left center;clip:rect(0px,16px,32px,1px);}

 .m-load2 .circlebg{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:#e7e7e7;border-radius:22px;}

 /** 加载动画 **/

 @-webkit-keyframes load{

     0%{background:#e7e7e7;}

     100%{background:#444;}

 }

 .m-load2 .box:nth-child(1) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0s infinite;}

 .m-load2 .box:nth-child(1) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.1s infinite;}

 .m-load2 .box:nth-child(1) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.2s infinite;}

 .m-load2 .box:nth-child(1) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.3s infinite;}

 .m-load2 .box:nth-child(2) .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.4s infinite;}

 .m-load2 .box:nth-child(2) .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.5s infinite;}

 .m-load2 .box:nth-child(2) .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.6s infinite;}

 .m-load2 .box:nth-child(2) .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.7s infinite;}

 </style>

 </head>

 <body>

 <div class="m-load"></div>

 <div class="m-load2">

     <div class="box">

         <div class="item"></div>

         <div class="item"></div>

         <div class="item"></div>

         <div class="item"></div>

         <div class="item"></div>

     </div>

     <div class="box">

         <div class="item"></div>

         <div class="item"></div>

         <div class="item"></div>

         <div class="item"></div>

     </div>

     <div class="circlebg"></div>

 </div>

 </body>

 </html>

CSS 实现加载动画之二-圆环旋转的更多相关文章

  1. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  2. 【动画消消乐】HTML+CSS 自定义加载动画 065

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  3. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  4. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

  5. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  6. CSS 实现加载动画之四-圆点旋转

    圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 ...

  7. CSS 实现加载动画之三-钢琴按键

    今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定.给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了.废话不多说,直接上图. 1. 先看gif图 2. 代码实现思路 2 ...

  8. CSS 实现加载动画之一-菊花旋转

    最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...

  9. 【动画消消乐】HTML+CSS 自定义加载动画 061

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

随机推荐

  1. UIButton 内部介绍

    **     设置内容距btn边框距离     **/    btn.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);        /** 将lab ...

  2. 很好的UI动效设计参考

    toolBar下拉:

  3. I/O多路复用——epoll函数

    1 select的低效率 select/poll函数效率比较低,主要有以下两个原因: (1)调用select函数后需要对所有文件描述符进行循环查找 (2)每次调用select函数时都需要向该函数传递监 ...

  4. Effective Java 14 In public classes, use accessor methods, not public fields

    Principle To offer the benefits of encapsulation you should always expose private field with public ...

  5. JavaScript Patterns 4.4 Self-Defining Functions

    If you create a new function and assign it to the same variable that already holds another function, ...

  6. CI框架SESSION重写

    这个是我平时用的是 PHP 自己的 Session 机制,是真正的 PHP Session,存储在服务器端,而不是用的 cookie 接口完全兼容于 CI 2.0.x 的 Session 类库,也就是 ...

  7. Oracle 11g 中恢复管理器RMAN介绍

    这是我平时摘录的笔记,从管理艺术那本书上摘录出来的,放到这里 RMAN 可在数据库服务器的帮助下从数据库内备份数据文件,可构造数据文件映像副本.控制文件和控制文件映像.对当日志 SPFILE 和RMA ...

  8. MySQL的replace函数的用法

    REPLACE(field,find_str,replace_str): 字段field的内容中的find_str 将被 替换为 replace_str . 例如: update short_url ...

  9. 001.linux下clock()检测程序运行时间

    #include <stdio.h> #include <time.h> int main() { int i; int k; clock_t start,end; //clo ...

  10. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...