1. 简介
loading 动画是网页中常用的一种效果，用于在加载数据或进行耗时操作时展示一个等待的状态，给用户一个视觉上的反馈，避免用户的焦虑和等待时间过长的烦躁感。本文将介绍如何使用 CSS 实现一个简单的 loading 动画效果。
2. 实现思路
要实现一个简单的 loading 动画效果，我们可以借助 CSS 的动画属性和关键帧动画的特性。通过对一个元素的样式进行变化，在一段时间内重复播放，就能够实现动画效果。
2.1 创建HTML结构
首先，我们需要在 HTML 中创建一个用于展示 loading 动画的元素，可以使用一个 div 元素：
<div id="loading"></div>2.2 添加CSS样式
接下来，为 loading 元素添加样式，使其具备动画效果和展示 loading 图标的能力。我们可以使用伪元素 ::before 和 ::after 来创建图标的形状，再利用 CSS 的 transform 属性对图标进行旋转动画。
#loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 3px solid #ccc;
border-top-color: #666;
border-radius: 50%;
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
3. 实现代码解析
在上述代码中，我们首先设置了 loading 元素的一些基本样式，如定位、大小和边框等。接下来定义了一个名为 rotate 的关键帧动画，在动画的 0% 和 100% 时刻，通过改变 transform 属性的值来实现旋转的效果。
关于 transform 属性：
transform: translate(-50%, -50%) rotate(0deg);
该条样式代表着以元素左上角为基准点，将元素水平和垂直方向上各向左上方移动自身尺寸的一半，然后绕元素中心点顺时针旋转 0 度。
通过将样式属性 animation 设置为 rotate 1s infinite linear，就将 rotate 动画应用到了 loading 元素上。其中，1s 表示动画从开始到结束所需要的时间，infinite 表示动画无限循环播放，linear 表示动画播放的速度是匀速的。
4. 效果展示
通过上述代码，我们就可以在浏览器中看到一个简单的 loading 动画效果了。页面上的 loading 元素会以一个圆形的图标在中心点处旋转。
当 loading 动画起效时，我们可以学到两个重要的 CSS 属性：
transform：用于控制元素的变形效果，包括旋转、平移、缩放等。
animation：用于定义动画的属性，包括动画名、持续时间、播放次数和速度曲线等。
5. 总结
CSS 提供了丰富的动画属性和特性，可以方便地实现各种动画效果，包括 loading 动画。通过利用 transform 属性和 animation 属性，我们可以轻松地创建一个简单的 loading 动画效果，为用户提供更好的体验。
需要注意的是，本文演示的只是一个简单的 loading 动画效果，实际项目中可能会更复杂。希望读者能够通过本文了解到如何使用 CSS 实现 loading 动画，并在实践中灵活运用。