效果大致如下：

主要实现方式：

该效果主要用到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. Java 中 Hashtable与HashMap的区别

    Map Map是一个以键值对存储的接口.Map下有两个具体的实现,分别是HashMap和HashTable. 区别: 1.HashMap是线程非安全的,HashTable是线程安全的,所以HashMa ...

  2. Linux Shell/Bash wildcard通配符、元字符、转义符使用

    说到shell通配符(wildcard),大家在使用时候会经常用到.下面是一个实例: 1   1 2 3 4 [chengmo@localhost ~/shell]$ ls a.txt  b.txt  ...

  3. Linux系统怎么分区

    linux分区方法,不同的人有不同的方法,反正没有统一的方法.在分区方面,我觉得根据自己的实际情况来分是最好的.玩linux也有好几年了,下面说一下,我在分区方面的一些经验. 一,个人用 如果是个人用 ...

  4. PHP实现curl post和get

    CURL这里就不说明了.以下是简单案例 一.POST //初始化 $curl = curl_init(); //设置抓取的url curl_setopt($curl, CURLOPT_URL, 'ht ...

  5. hadoop细节 -> 持续更新

    Hdfs: hdfs写流程: 客户端通过DistributedFileSystem请求namenode上传文件 Namenode进行检查,比如父路径   文件本身,是否允许上传 Namenode相应信 ...

  6. 英语affrike非洲

    中文名称:阿非利加洲(全称) 外文名称:Africa 别 名:Affrike 行政区类别洲 下辖地区北非.东非.西非.中非.南非 地理位置:东濒印度洋,西临大西洋,北至地中海,南至好望角 面 积:30 ...

  7. JavaScript变量存储浅析（一）

    Hello! 上一篇关于JS中函数传参(http://www.cnblogs.com/souvenir/p/4969092.html)的介绍中提到了JS的另外一个基本概念:JS变量存储, 今天我们就用 ...

  8. leetcode 学习心得 (3)

    源代码地址:https://github.com/hopebo/hopelee 语言:C++ 517. Super Washing Machines You have n super washing ...

  9. idea中新增package总是嵌套的解决方法

    在idea中创建package,为了方便会将com.xx.xx作为一个package,下面添加对应的子package.比如service,config等.但是当我创建是总是会嵌套在下面变成了com.x ...

  10. Pyspark中遇到的 java.io.IOException: Not a file 和 pyspark.sql.utils.AnalysisException: 'Table or view not found

    最近执行pyspark时,直接读取hive里面的数据,经常遇到几个问题: 1.  java.io.IOException: Not a file —— 然而事实上文件是存在的,是 hdfs 的默认路径 ...