效果大致如下：

主要实现方式：

该效果主要用到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. docker swarm yaml

    https://www.cnblogs.com/bigberg/p/8867326.html 一.简介 Docker有个编排工具docker-compose,可以将组成某个应该的多个docker容器编 ...

  2. 利用HashMap计算一个字符串中每个字符出现的次数

    问题描述:计算一个字符串中每个字符出现的次数 问题分析:每个字符串对应着它的次数,且字符串唯一不重复,这让我们想到了HashMap中的键值对. 1.使用Scanner获取字符串 2.遍历字符串,获取每 ...

  3. 2019 斗鱼java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.斗鱼等公司offer,岗位是Java后端开发,因为发展原因最终选择去了斗鱼,入职一年时间了,之前面试了很多家公 ...

  4. 【开发笔记】- SSM使用velocity模板语言

    1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...

  5. js基本包装类型及Math对象(八)

    一.基本包装类型[继承于Object类型]1.Number().String().Boolean()引用数据类型[包装类型]分别对应的基本数据类型为number.string.boolean. 2.当 ...

  6. vsftp 常见配置测试与故障排除

    匿名用户 /var/ftp        本地用户 /home/username配置vsftpd时,强烈建议·# cp /etc/vsftpd.conf /etc/vsftpd.conf1       ...

  7. sqlserver 备份集中的数据库备份与现有的 'XXX' 数据库不同。

    需求是将Ecology复制一份出来用于发布测试程序. 方案一 正确步骤 1.新建数据库Ecology2 2.选中Ecology2 点击右键:任务--还原--文件和文件组 选中源设备--点击右侧...按 ...

  8. mybatis添加sql打印功能

    添加配置文件: mybatis-config.xml <?xml version="1.0" encoding="UTF-8"?> <!DOC ...

  9. Oracle数据库入门到高薪培训教程（从Oracle 11g 到 Oracle 19c）

    一.Oracle数据库入门到高薪培训视频教程(从 Oracle11g 到 Oracle19c) 本套Oracle视频教程学习地址: https://edu.51cto.com/course/18034 ...

  10. Seata 动态配置订阅与降级实现原理

    Seata 的动态降级需要结合配置中心的动态配置订阅功能.动态配置订阅,即通过配置中心监听订阅,根据需要读取已更新的缓存值,ZK.Apollo.Nacos 等第三方配置中心都有现成的监听器可实现动态刷 ...