CSS3 实现的加载动画

1. 前言

CSS动画是现代WEB设计的必备技术之一。其中，加载动画可以增强用户对网站的体验，提高用户的参与度，因此成为了广泛关注的研究方向。本文将着重介绍CSS3实现的一种加载动画。

2. 什么是CSS3加载动画

CSS3加载动画是指通过CSS3实现的一种动态效果，通常在网站或应用程序加载时显示。这种动画可以让用户清楚地知道数据正在加载并等待完成，同时也让用户对数据的处理过程有一定的了解。CSS3加载动画可以是极简的，也可以是完美的设计，该动画是通过CSS命令来实现的。

3. CSS3加载动画分类

CSS3加载动画根据特效不同，可以分为旋转类（喜欢使用Loading..）、移动类（如进度条）、效果类（如波浪形、星星闪烁等）。本文介绍的是使用CSS3实现的一种圆圈变化颜色的加载动画。

4. CSS3加载动画的实现步骤

4.1 编写HTML

加载动画HTML代码非常简单，只需一个<div>标签即可。下面就是相关代码：

  <div class="loading"></div>

4.2 编写CSS3

CSS3是实现加载动画的核心。在这里，我们将使用@keyframes命令来设置动画。下面是代码应当写的样式来制作动画

  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    border-radius: 50%;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

加载动画的style定义中，用.hide和.show区分出了动画的与否。其中，.loading中的一些特殊属性值得注意：position控制位置，top、left、margin可调整div位置，width、height控制size， border-radius实现圆形，border设置边框颜色，border-top控制颜色变化方向，animation控制动画的实现。其中的animation实际通过自定义一个spin来作为动画的关键帧。

5. 总结

借助CSS3的新特性，实现一个简洁、唯美的加载动画并不困难，这样的动画让我们的网页在等待过程中不至于过于无趣。而通过让用户感受到加载的过程，提高了用户对网页的黏性。