效果大致如下：

主要实现方式：

该效果主要用到animation-timing-function中的steps()函数，该函数主要用于分步隐藏不同模块。

实现思路：

第一步动画：

第二步动画：

第三步动画：

第四步动画：

旋转半圆：

将gif动画分解为四步实现，每一步都是由旋转半圆旋转实现动画效果，再通过steps函数分步隐藏不同模块实现整个连贯动画。

全部代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <title></title>

 <meta charset=UTF-8 />

 <style>

 .wrap {

     width: 64px;

     height: 64px;

     position: relative;

 }

 .inner, .inner2 {

     position: absolute;

     width: 38px;

     height: 38px;

     border-radius: 40px;

     overflow: hidden;

     left: 13px;

     top: 13px;

 }

 .inner { opacity: 1; background-color: #89abdd;

     animation: second-half-hide 1.6s steps(1, end) infinite;

 }

 .inner2 { opacity: 0; background-color: #4b86db;

     animation: second-half-show 1.6s steps(1, end) infinite;

 }

 .spiner, .filler, .masker {

     position: absolute;

     width: 50%;

     height: 100%;

 }

 .spiner {

     border-radius: 40px 0 0 40px;

     background-color: #4b86db;

     transform-origin: right center;

     animation: spin 800ms infinite linear;

     left: 0;

     top: 0;

 }

 .filler {

     border-radius: 0 40px 40px 0;

     background-color: #4b86db;

     animation: second-half-hide 800ms steps(1, end) infinite;

     left: 50%;

     top: 0;

     opacity: 1;

 }

 .masker {

     border-radius: 40px 0 0 40px;

     background-color: #89abdd;

      animation: second-half-show 800ms steps(1, end) infinite;

      left: 0; top: 0;

      opacity: 0;

  }

 .inner2 .spiner, .inner2 .filler {

     background-color: #89abdd;

 }

 .inner2 .masker {

     background-color: #4b86db;

 }

 /*旋转动画*/

 @keyframes spin {

   0%   { transform: rotate(360deg); }

   100% { transform: rotate(0deg); }

 }

 /*分步显示动画*/

 @keyframes second-half-hide {

   0%        { opacity: 1; }

   50%, 100% { opacity: 0; }

 }

 /*分步显示动画*/

 @keyframes second-half-show {

   0%        { opacity: 0; }

   50%, 100% { opacity: 1; }

 }

 </style>

 </head>

 <body>

 <body>

 <div class="wrap">

     <div class="inner">

         <!-- 顶层旋转效果 -->

         <div class="spiner"></div>

         <!-- 右侧分步显示半圆 -->

         <div class="filler"></div>

         <!-- 左侧分步显示半圆 -->

         <div class="masker"></div>

     </div>

     <div class="inner2">

         <div class="spiner"></div>

         <div class="filler"></div>

         <div class="masker"></div>

     </div>

 </div>

 </body>

 </html>

参考文章：http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

http://www.tuicool.com/articles/neqMVr

animation-timing-function

CSS3 之loading动画实现思路的更多相关文章

  1. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  2. css3波浪形loading动画

    css3做个第一个动画,主要点在box-shadow和background的变化,虽然不难,但是还是有一定的技巧性的!备注下 html <div class="loading" ...

  3. CSS3实现Loading动画特效

    查看效果:http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head> < ...

  4. 【CSS3】loading动画

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  6. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  7. 简单的CSS3 Loading动画

    最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...

  8. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  9. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

随机推荐

  1. DevExpress中GridColumnCollection实现父子表数据绑定

    绑定数据: 父表: DataTable _parent = _dvFlt.ToTable().Copy(); 子表: DataTable _child = _dvLog.ToTable().Copy( ...

  2. 自己使用的jquery公用common.js

    /*解决ie8中js数组没有indexOf方法*/ jQuery.extend({ exportResport : function(url, method, params){ var paramCo ...

  3. Python的字符串函数

    今天用了将近一天的时间去学习Python字符串函数 上午学了17个,下午学了23个(共计40) 详细内容请见菜鸟教程--Python3字符串--Python的字符串内建函数

  4. AWS成本估算的相关小工具

    1.AWS-partner :云势数据做的在线小工具,有微信版本可以使用,但是涉及的服务很少,更新慢,型号缺,界面不友好.不是很理想,连接如下:     https://www.goclouds.cn ...

  5. ROS的安装与使用

    一.apt方式安装 安装 说起ROS,可能大家现在或多或少都有所了解.现如今世界机器人发展之迅猛犹如几十年前计算机行业一样,机器人也逐渐进入到千家万户,大到工业机器人,小到家用的服务型机器人,各式各样 ...

  6. 溢出处理、盒子模型、背景图片、float（浮动）

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  7. 英语DIAMAUND钻石指坚硬不可侵犯的物质

    首先谈谈钻石和金刚石的名称.金刚石是一种天然矿物,是钻石的原石.习惯上人们常将加工过的金刚石称为钻石,而未加工过的称为金刚石(当然,有的金刚石不用加工便可应用).钻石是那些达到宝石级别的金刚石晶体切磨 ...

  8. iOS应用安全开发，你不知道的那些事

    来源:http://www.csdn.net/article/2014-04-30/2819573-The-Secret-Of-App-Dev-Security 摘要:iOS应用由于其直接运行在手机上 ...

  9. iOS学习——（转）解决iOS App打包后dSYM文件找不到的问题

    dSYM文件缺失通常有两种情况**: 情况一:配置错误导致打包时没有生成dSYM文件 针对这种情况,通常是因为Project -> Build Settings下的Debug Informati ...

  10. 使用ABAP操作Excel的几种方法

    这篇文章本来不在我计划之内,因为最近一个朋友微信上问到我这个问题,但我平时在SAP研究院工作中从没遇到过需要用ABAP操作Excel的需求,因此也没有太多技术实现细节可以分享给大家,只能泛泛写一些. ...