效果大致如下：

主要实现方式：

该效果主要用到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. C#字符串连接问题（包含破折号和引号）

    1.需求场景: 生成字符串如下:jsonStr.Append("\"SensorTypes\":"); 解决方法: string code = @"j ...

  2. .net 使用SqlBulkCopy批量插入数据库

    //一次批量插入100W条数据到数据库 static void Main(string[] args) { System.Random a = new Random(System.DateTime.N ...

  3. 【转载】 C#中List集合使用OrderByDescending方法对集合进行倒序排序

    在C#的List集合操作中,有时候需要针对List集合进行排序操作,如果是对List集合按照元素对象或者元素对象的某个属性进行倒序排序的话,可以使用OrderByDescending方法来实现,Ord ...

  4. 手写MQ框架（一）-准备启程

    一.背景 很久以前写了DAO框架和MVC框架,前段时间又重写了DAO框架-GDAO(手写DAO框架(一)-从“1”开始,源码:https://github.com/shuimutong/gdao.gi ...

  5. idea安装与注册码破解

    idea安装与注册码破解 https://www.cnblogs.com/jajian/p/7989032.html

  6. 【体系结构】有关Oracle SCN知识点的整理

    [体系结构]有关Oracle SCN知识点的整理 1  BLOG文档结构图   BLOG_Oracle_lhr_Oracle SCN的一点研究.pdf 2  前言部分 2.1  导读和注意事项 各位技 ...

  7. python爬虫系列：三、URLError异常处理

    1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的服务器 服务器不存在 在代码中,我们需要用try-except语句来包围并捕获相应的异常. ...

  8. R语言包在linux上的安装等知识

    有关install.packages()函数的详见:R包 package 的安装(install.packages函数详解) R的包(package)通常有两种:1 binary package:这种 ...

  9. SpringBoot项目打成jar在linux后台运行

    --关闭客户端依然进程存在 nohup java -jar spring-boot-hello-1.0.jar 1>/dev/null 2>&1 & --Ctrl+C后不会 ...

  10. 20.centos7基础学习与积累-006-软实力-画图

    从头开始积累centos7系统运用 亿图是用指南 安装亿图软件 修改基础配置 路径:文件==>选项==>常规 需要修改的参数: 撤销次数:256 自动保存间隔:2分钟 路径:文件==> ...