CSS3 之loading动画实现思路
效果大致如下：
主要实现方式：
该效果主要用到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动画实现思路的更多相关文章
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- css3波浪形loading动画
css3做个第一个动画,主要点在box-shadow和background的变化,虽然不难,但是还是有一定的技巧性的!备注下 html <div class="loading" ...
- CSS3实现Loading动画特效
查看效果:http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head> < ...
- 【CSS3】loading动画
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- 7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
- 简单的CSS3 Loading动画
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- CSS3效果：animate实现点点点loading动画效果（二）
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...
随机推荐
- KIP-382: MirrorMaker 2.0
Status Motivation Public Interfaces Proposed Changes Remote Topics, Partitions Aggregation Cycle det ...
- java之mybatis之查询及分页
1.mybatis中查询方式有3种 //查询单个值 @Test public void testFindOne()throws IOException{ SqlSession session = My ...
- Resharper2019 1.2破解教程
下载安装 Resharper 去Resharper官网下载安装 Resharper官网地址 Resharper下载地址 破解 (破解dll百度网盘链接)[https://pan.baidu.com/s ...
- python（生成器）
生成器 先从列表生成式说起 可以通过简单的式子,生成有规律的列表 如果把 [ ] 换为 ( ) 会发生什么呢? 看到 x 存的不再是列表,而是一个地址,而这个地址就是我们的生成器对象的地址 这东西有什 ...
- 学习笔记之Vim
Vim (text editor) - Wikipedia https://en.wikipedia.org/wiki/Vim_(text_editor) Vim (/vɪm/;[4] a contr ...
- 仿EXCEL插件，智表ZCELL产品V1.7 版本发布，增加自定义右键菜单功能
详细请移步 智表(ZCELL)官网www.zcell.net 更新说明 这次更新主要应用户要求,主要解决了自定义右键菜单事件的支持,并新增了公式中自定义函数传参.快捷键剪切等功能,欢迎大家体验使用. ...
- 基于 k8s-搭建 Kubernetes 的 web 管理界面
查看我们的k8s环境是否正常: 使用kubectl get nodes 获取我们的节点的信息: 到此说明我们的kubernetes环境是正常的,接下来就可以实验了 第一步在master上传所需的软件包 ...
- 存储管理器 S3C2440A
CPU通过存储管理器来控制外部设备 SDRAM存储结构 S3C2440A内存控制器 原理图 HY57V561620(L)T 4Banks x 4M x 16Bit Synchronous DRAM S ...
- 支付宝支付 微信支付SDK接口不统一？ 盘他！
开发过支付宝.微信支付的同学都知道,微信的支付 API 设计感觉是 Java 开发工程师写的,远不如支付宝 SDK 的接口设计用起来顺手.在这里,统一封装微信支付和支付宝支付的API,使两种支付方 ...
- Spark之开窗函数
一.简介 开窗函数row_number()是按照某个字段分组,然后取另外一个字段排序的前几个值的函数,相当于分组topN.如果SQL语句里面使用了开窗函数,那么这个SQL语句必须使用HiveConte ...