1. CSS3创建实用的加载动画效果
CSS3提供了丰富的动画效果，包括2D、3D变换、过渡、动画等。这篇文章将介绍两种利用CSS3创建实用的加载动画效果。
1.1. 旋转圆圈动画
旋转圆圈动画是一种非常简单但又实用的加载动画效果，通常用于等待数据加载的过渡效果。
首先创建一个HTML文档，并定义一个包含元素的容器。然后使用CSS定义该容器的样式和旋转动画。以下是代码示例：
.container {
width: 100px;
height: 100px;
position: relative;
}
.container .circle {
width: 60px;
height: 60px;
border: 5px solid #ccc;
border-top-color: #f00;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
说明：
* 容器设置宽高，使用相对定位。
* 圆圈样式设置边框宽度、颜色、圆角等属性，使用绝对定位并将圆圈居中。
* 定义rotate动画，控制圆圈旋转。设置从0度到360度的旋转过程，持续1秒，并且无限循环。
运行效果如下：
1.2. 缩放方块动画
缩放方块动画是另一种简单但实用的加载动画效果，通常用于替代旋转圆圈动画。
同样地，首先创建一个HTML文档，并定义一个包含元素的容器。然后使用CSS定义该容器的样式和缩放动画。以下是代码示例：
.container {
width: 100px;
height: 100px;
position: relative;
}
.container .square {
width: 60px;
height: 60px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
animation: scale 1s ease-in-out infinite;
}
@keyframes scale {
0%, 100% {transform: scale(0);}
50% {transform: scale(1);}
}
说明：
* 容器和方块的样式与旋转圆圈动画类似。
* 定义scale动画，控制方块缩放。设置从0到1的缩放过程，并且在动画开始、中间和结束时分别设置不同的缩放比例，实现缩放和停顿的效果。
运行效果如下：
2. 总结
CSS3提供了丰富的动画效果，我们可以利用它们创建实用的加载动画效果，提高用户体验。本文介绍了两种简单但实用的加载动画效果：旋转圆圈动画和缩放方块动画。它们可以根据具体的应用场景进行选择和应用。