一些网站或者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加载动画效果（一）的更多相关文章

  1. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  2. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  3. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  4. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  5. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  6. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  7. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  8. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  9. jquery加载数据时显示loading加载动画特效

    插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...

随机推荐

  1. Java中的大数值使用

    在Java中,偶尔会遇到超大数值,超出了已有的int,double,float等等你已知的整数.浮点数范围,那么可以使用java.math包中的两个类:BigInteger和BigDecimal. 这 ...

  2. js 从目标数组中过滤掉 一个数组元素，

    标题描述的有点僵硬,大概需求是,从目标数组中过滤掉我想要删除的元素集合,这里使用的是遍历+过滤器的组合,很方便,做个笔记! let old = ["AE_CN_SUPER_ECONOMY_G ...

  3. 今天发现郭的华为手机无法读写sd卡，找到了这个方法

    https://bbs.csdn.net/topics/391985867?page=1 华为P9是android 6.0 的==在API23+以上也就是安卓6.0以上的,进行了权限管理不止要在And ...

  4. Win10下ImageMagick及php-imageck扩展的安装

    安装ImageMagick https://imagemagick.org/script/download.php 选择符合自己电脑的版本进行安装即可.安装的时候注意勾选下面的选项自动加入环境变量,否 ...

  5. 在excel中如何给一列数据批量加上双引号

    在实际开发中,会遇到这样的需求,大量的数据,需要从配置文件里读取,客户给到的枚举值是字符串,而配置文件里的数据,是json格式,需要加上双引号,这样就需要使用Excel来批量格式化一下数据. 客户给到 ...

  6. PHP date_sub() 函数

    ------------恢复内容开始------------ 实例 从 2013 年 3 月 15 日减去 40 天: <?php$date=date_create("2013-03- ...

  7. Python Cookbook(第3版) 中文版 pdf完整版|网盘下载内附提取码

    Python Cookbook(第3版)中文版介绍了Python应用在各个领域中的一些使用技巧和方法,其主题涵盖了数据结构和算法,字符串和文本,数字.日期和时间,迭代器和生成器,文件和I/O,数据编码 ...

  8. P3270 [JLOI2016]成绩比较 容斥 数论 组合数学 拉格朗日插值

    LINK:成绩比较 大体思路不再赘述 这里只说几个我犯错的地方. 拉格朗日插值的时候 明明是n次多项式 我只带了n个值进去 导致一直GG. 拉格朗日插值的时候 由于是从1开始的 所以分母是\((i-1 ...

  9. 4.28 省选模拟赛模拟赛 最佳农场 二维卷积 NTT

    第一次遇到二维卷积 不太清楚是怎么做的. 40分暴力比对即可. 对于行为或者列为1时 容易想到NTT做快速匹配.然后找答案即可. 考虑这是一个二维的比对过程. 设\(f_{i,j}\)表示以i,j为右 ...

  10. MR程序的几种提交运行模式

    本地模式运行 1-在windows的eclipse里面直接运行main方法 将会将job提交给本地执行器localjobrunner 输入输出数据可以放在本地路径下 输入输出数据放在HDFS中:(hd ...