CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。
1．圆环型Loading
这类Loading动画的基本思想是：先在呈现容器中定义一个名为loader的层，再对loader进行样式定义，使得其显示为一个圆环，最后编写关键帧动画控制，使得loader层旋转起来即可。
（1）旋转未封闭的圆环加载效果。
例如，设页面中有 <div class='loader'></div>，定义loader的样式规则如下：
.loader
{
width:100px;
height:100px;
border-radius:50%;
border:16px solid #f3f3f3;
border-top:16px solid #ff0000;
}
则显示的图形如图1所示。
图1 圆环1
若在上面的样式规则中加上语句：border-bottom:16px solid #0000ff;，则显示的图形如图2所示。
图2 圆环2
如再同时将边框颜色修改为容器背景色，则显示的图形如图3所示。
图3 圆环3
若只将样式规则中的“border-top:16px solid #ff0000;”改写为“border-top:16px solid #d8d8d8;”，即将图1边框上的红色改成背景色，则显示的图形如图4所示。
图4 圆环4
编写关键帧定义，并在loader样式定义中加上animation属性设置语句，可以得到如图5所示的Loading动画效果。
完整的HTML文件内容如下。
<!DOCTYPE html>
<html>
<head>
<title>Loading加载动画</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.loader
{
width:100px;
height:100px;
border-radius:50%;
border:16px solid #d8d8d8;
border-top:16px solid #ff0000;
border-bottom:16px solid #0000ff;
animation:load 2s linear infinite;
}
@keyframes load
{
0% { transform: rotate(0deg); }
100% { transform:rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class='loader'></div>
</div>
</body>
</html>
图5 Loading动画效果（1）
图1圆环对应的动画效果如图6所示。
图6 Loading动画效果（2）
图4圆环对应的动画效果如图7所示。
图7 Loading动画效果（3）
图5、图6和图7的效果是通过旋转实现的，还可以缩放圆环，将关键帧的定义修改为：
@keyframes load
{
0%
{
transform: scale(0.2);
opacity: 0.5;
}
100%
{
transform: scale(1);
opacity: 1;
}
}
则呈现出如图8所示的动画效果。
图8 Loading动画效果（4）
可以设定两个弧段，进行交叉旋转，编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>Loading加载动画</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.loader
{
position:absolute;
border-radius:50%;
border:10px solid #d8d8d8;
border-bottom:10px solid #0000ff;
animation:load 2s linear infinite;
}
.loader:nth-child(1)
{
width:100px;
height:100px;
}
.loader:nth-child(2)
{
width:70px;
height:70px;
animation-direction: reverse;
}
@keyframes load
{
0% { transform: rotate(0deg); }
100% { transform:rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class='loader'></div>
<div class='loader'></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图9所示的Loading动画效果。
图9 Loading动画效果（5）
若将上面.loader定义中的语句“border:10px solid #d8d8d8;”删除，则呈现如图10所示的动画效果。
图10 Loading动画效果（6）
（2）旋转后封闭的圆环加载效果。
上面的几个圆环型动画效果是一段圆环形弧段进行旋转，旋转的整个过程中未封闭成一个圆环。若旋转过程中出现一个封闭的圆环，例如一小段圆弧逐步沿圆环转动，转动过程中圆弧段加长，直到封闭为一个圆环。动画效果如图11所示。
图11 Loading动画效果（7）
这个动画制作起来稍微复杂一点，需要借助遮罩的思想。基本思路是：先制作一个完整的圆环，然后在圆环上左右两半边上分别让一个填充色为红色的矩形框旋转，旋转时位于圆环上的部分显示出来，超出圆环的部分被隐藏（设置overflow: hidden;即可），这样就可实现图11所示的动画效果。
设页面有<span class="loader"></span>，定义.loader的样式规则如下：
.loader
{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background:#f3f3f3;
}
.loader:after
{
content: "";
position: absolute;
top: 20px;
left: 20px;
height: 60px;
width: 60px;
background:#d8d8d8;
border-radius: 50%;
}
可以得到如图12所示的圆环。
图12 一个圆环
然后分别对圆环内的子元素左右矩形框进行样式设置和关键帧定义，编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>Loading加载动画</title>
<style>
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.loader
{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background:#f3f3f3;
}
.loader:after
{
content: "";
position: absolute;
top: 20px;
left: 20px;
height: 60px;
width: 60px;
background:#d8d8d8;
border-radius: 50%;
}
.loader > span
{
position: absolute;
height: 100%;
width: 50%;
overflow: hidden;
}
.left
{
left:0
}
.right
{
left:50%;
}
.mask
{
position: absolute;
left: 100%;
top: 0;
height: 100%;
width: 100%;
border-radius: 60px;
background: #ff0000;
opacity: 0.8;
animation: rotate1 3s infinite linear;
transform-origin: 0 50% 0;
}
.left .mask
{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.right .mask
{
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -100%;
transform-origin: 100% 50% 0;
animation-name:rotate2;
animation-delay: 1.5s;
}
@keyframes rotate1
{
0% { transform:rotate(0deg);}
25% { transform:rotate(0deg);}
50% { transform:rotate(180deg);}
75% { transform:rotate(180deg);}
100%{ transform:rotate(360deg);}
}
@keyframes rotate2
{
0% { transform:rotate(0deg);}
25% { transform:rotate(180deg);}
50% { transform:rotate(180deg);}
75% { transform:rotate(360deg);}
100%{ transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="container">
<span class="loader">
<span class="left"><span class="mask"></span></span>
<span class="right"><span class="mask"></span></span>
</span>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图11所示的Loading动画效果。
若将上面代码中.right .mask定义里的“animation-name:rotate2;”和“animation-delay: 1.5s;”语句删除，这时圆环左右两边的动画过程相同，且右边也没有延时，呈现出如图13所示的Loading动画效果。
图13 Loading动画效果（8）
若只将上面HTML文件中.loader:after的样式定义全删除（这样图形就变成一个实心圆，不再是一个圆环），其余部分保持不变，则呈现出如图14所示的Loading动画效果。
图14 Loading动画效果（9）
若将上面HTML文件中.loader:after的样式定义全删除后，再删除right .mask定义里的“animation-name:rotate2;”和“animation-delay: 1.5s;”语句，其余部分保持不变，则呈现出如图15所示的Loading动画效果。
图15 Loading动画效果（10）
CSS动画实例：Loading加载动画效果（一）的更多相关文章
- CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 原生JS+ CSS3创建loading加载动画；
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- jquery加载数据时显示loading加载动画特效
插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...
随机推荐
- springMVC -- 对接UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
- PHP中interface的用处
确实,PHP 接口是有它的目的的. 它们是契约,是给其他开发人员的说明手册.然而,还是很难理解接口有什么用. 基础 接口是抽象的类,无法直接实例化,但是可被实现. 这是一个基本的例 int ...
- VS Code 上那些沙雕插件
本文整理自网络,作者不详,如有侵权,则可删除. VS Code 作为前端最牛逼的一个前端编辑器,可以说是最流行的开发工具了,以其可支持扩展程序(通过安装扩展程序,VS Code 可以支持更多新的语言. ...
- python中的subprocess.Popen()使用详解---以及注意的问题（死锁）
从python2.4版本开始,可以用subprocess这个模块来产生子进程,并连接到子进程的标准输入/输出/错误中去,还可以得到子进程的返回值. subprocess意在替代其他几个老的模块或者函数 ...
- paramiko上传文件到Linux
一.传输单个文件到Linux服务器 import paramiko transport = paramiko.Transport(('host',22)) transport.connect(user ...
- MacOS下ElasticSearch学习(第二天)
ElasticSearch第二天 学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"elasticsearch&q ...
- PHP get_defined_vars() 函数
get_defined_vars() 函数返回由所有已定义变量所组成的数组. 版本要求:PHP 4 >= 4.0.4, PHP 5, PHP 7高佣联盟 www.cgewang.com 语法 a ...
- 5.29 省选模拟赛 树的染色 dp 最优性优化
LINK:树的染色 考场上以为这道题要爆蛋了 没想到 推出正解来了. 反正是先写了爆搜的 爆搜最近越写越熟练了 容易想到dp 容易设出状态 f[i][j]表示以i为根的子树内白色的值为j此时黑色的值怎 ...
- 安装ElasticSearch遇到的深坑
实验需要ES,安装过程中遇到一些奇葩的问题,记录下.下面介绍下安装步骤: 第一步:安装java ES是运行在java虚拟机上面的,所以首先需要安装java环境,安装过程不再赘述,唯一需要注意的是ES对 ...
- python 操作元组 列表===python中三大宝刀（字典已经再上一遍 说过）
字典俗称,世界有多大就能装多大 列表俗称,你们决定 元组俗称,可远观而不可亵玩焉 列表的相关操作a=['1','2','3','5','6','7']# print(a[0])# print(a[0: ...