效果大致如下：

主要实现方式：

该效果主要用到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. ELK学习笔记之logstash将配置写在多个文件

    0x00 概述 我们用Logsatsh写配置文件的时候,如果读取的文件太多,匹配的正则过多,会使配置文件动辄成百上千行代码,可能会造成阅读和修改困难.这时候,我们可以将配置文件的输入.过滤.输出分别放 ...

  2. 介绍ArcGIS中各种数据的打开方法——mdb（个人数据库）

    3.打开存储在Access GeoDatabase的要素类 使用工作空间打开一个Access库中的一个要素类. private void OpenWorkspaceFromFileAccess(str ...

  3. 继承与构造函数（base关键字）

    1.背景 我:虽然通过继承减少了代码冗余,但是,每一个子类的构造函数还是需要给所有属性赋值的,很麻烦的. 师:这个好办,用base就行啦. 我:贝司?还吉他呢! 师:别急,首先我们先介绍下实例化子类对 ...

  4. OpenFace 调试记录

    1.OpenFace 是 卡耐基梅陇(CMU)大学的一个图像+机器学习项目,整体程序包含:人脸发现,特征提取,特征神经网络训练,人脸识别这四部分. github   https://github.co ...

  5. aria2 添加任务后一直在等待，不进行下载是什么情况？

    https://www.v2ex.com/t/567014 跑 aria2 的机器配置比较低,是 j1900+4G 的小机器,系统是 ubuntu18.04 ,所有的任务都是 bt 下载.aria2 ...

  6. HTML实用文本框样式

    输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...

  7. ps 修补工具

    最近刚好遇到需要p图去除水印,这里将ps去除水印的使用记录下来已备翻阅 1.需求图片(如下),使用软件 photo shop cc 2017(以下简称ps) 2.操作 2.1方法一 使用五点修复画笔工 ...

  8. Vue学习之webpack中使用vue(十七）

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...

  9. Selenium浏览器自动化测试工具

    目录 Selenium浏览器自动化测试工具 Selenium模块在爬虫中的使用 Python简单使用Selenium Selenium的基本操作 Selenium爬取动态加载的数据 Selenium动 ...

  10. jmeter学习笔记（二十二）——监听器插件之jp@gc系列

    一.jp@gc - Actiive Threads Over Time 不同时间活动用户数量展示 下面是一个阶梯加压测试的图标   二.jp@gc - Transactions per Second ...