加载动画在网页中很常见，通常用于内容加载时提升用户体验。使用 html5 和 css3 的关键帧（@keyframes）可以轻松创建流畅的动画效果。
HTML 结构：创建加载动画容器
用一个简单的 div 元素作为加载动画的容器：
<div class=”loader”></div>
这个 div 不需要任何内容，仅作为动画展示元素。
CSS3 关键帧：定义动画过程
@keyframes 是 CSS3 提供的规则，用来定义动画从开始到结束的各个阶段。
立即学习“前端免费学习笔记（深入）”；
例如，创建一个旋转动画：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
这里定义了一个名为 spin 的动画，元素从 0 度旋转到 360 度。
应用动画到加载元素
将上面定义的关键帧应用到 .loader 元素上，并设置外观：
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
说明：
- border 创建圆环轮廓
- border-top 颜色不同 让旋转更明显
- border-radius: 50% 确保是圆形
- animation 属性调用 spin 动画，持续 1 秒，线性播放，无限循环
完整示例代码
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 100px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class=”loader”></div>
</body>
</html>
基本上就这些。通过组合 HTML 结构和 CSS3 的 @keyframes，你可以制作出各种加载动画，比如脉冲、跳动、进度条等，只需修改关键帧中的属性即可。