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>

View Code

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

View Code

      在浏览器中打开包含这段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>

View Code

      在浏览器中打开包含这段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)