使用HTML5和CSS3的@keyframes可创建加载动画，通过定义旋转等关键帧并应用到div容器实现流畅效果。
加载动画在网页中很常见，通常用于内容加载时提升用户体验。使用 HTML5 和 CSS3 的关键帧（@keyframes）可以轻松创建流畅的动画效果。
HTML 结构：创建加载动画容器
用一个简单的 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 秒，线性播放，无限循环
完整示例代码
a style="color:#f60; text-decoration:underline;" title= "html"href="https://www.php.cn/zt/15763.html" target="_blank">html>基本上就这些。通过组合 HTML 结构和 CSS3 的 @keyframes，你可以制作出各种加载动画，比如脉冲、跳动、进度条等，只需修改关键帧中的属性即可。
