答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。
在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。
1. 旋转圆圈加载动画
这是最常见的加载效果，使用一个圆形元素不断旋转。
对应的CSS：
.loader { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
说明：通过改变 border-top 颜色制造视觉差，配合 rotate 实现持续旋转。
立即学习“前端免费学习笔记（深入）”；
2. 脉冲波（呼吸）动画
模拟心跳或扩散效果，常用于提示等待状态。
.loader { width: 20px; height: 20px; background: #3498db; border-radius: 50%; opacity: 0.6; animation: pulse 1.5s ease-in-out infinite;}@keyframes pulse { 0% { transform: scale(0); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(0); opacity: 0.6; }}
这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。
千博企业网站系统全功能个人版SQL2011 Build 0903
2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态
0 查看详情
3. 多点跳动动画
三个小球依次上下跳动，常用于现代UI设计。
.loader { display: flex; gap: 6px;}.dot { width: 8px; height: 8px; background: #3498db; border-radius: 50%; animation: bounce 1.4s ease-in-out infinite both;}.dot:nth-child(1) { animation-delay: -0.32s; }.dot:nth-child(2) { animation-delay: -0.16s; }@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); }}
HTML结构：
每个点设置不同延迟，形成错落有致的跳动节奏。
4. 自定义线条动画
使用伪元素创建动态线条加载效果。
.loader::before { content: ''; display: block; width: 50px; height: 5px; background: linear-gradient(90deg, #3498db, #e74c3c); border-radius: 3px; animation: slide 1.5s ease-in-out infinite;}@keyframes slide { 0% { transform: translateX(0) scaleX(1); } 50% { transform: translateX(100px) scaleX(0.2); } 100% { transform: translateX(0) scaleX(1); }}
这种适合做进度条或内容加载指示器。
基本上就这些。核心是掌握 @keyframes 和 animation 属性的使用，再结合 transform、opacity 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。
以上就是在css中如何制作加载动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015715.html
微信扫一扫 
支付宝扫一扫 
