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所示。

CSS动画实例：Loading加载动画效果（一）

图1 圆环1

若在上面的样式规则中加上语句：border-bottom:16px solid #0000ff;，则显示的图形如图2所示。

CSS动画实例：Loading加载动画效果（一）

图2 圆环2

如再同时将边框颜色修改为容器背景色，则显示的图形如图3所示。

CSS动画实例：Loading加载动画效果（一）

图3 圆环3

若只将样式规则中的“border-top:16px solid #ff0000;”改写为“border-top:16px solid #d8d8d8;”，即将图1边框上的红色改成背景色，则显示的图形如图4所示。

CSS动画实例：Loading加载动画效果（一）

图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>

View Code