要制作css加载动画，核心在于使用@keyframes配合transform实现旋转和进度条效果。1. 旋转动画通过border-top制造缺口并无限旋转；2. 进度条通过width变化结合animation-fill-mode: forwards保持最终状态；3. css动画性能更优，因gpu渲染流畅且不阻塞主线程；4. 优化时优先使用transform和opacity，减少dom元素并考虑兼容性前缀与prefers-reduced-motion；5. 创意效果包括点阵跳动、线条绘制、呼吸脉冲、形变液态及简单粒子动画，均依赖于对css属性的灵活组合与@keyframes的精准控制。
CSS要制作加载动画，核心在于利用@keyframes规则配合transform属性实现旋转效果，以及通过改变元素的width或transform: translateX来模拟进度条的增长。这些技术通常结合animation属性来控制动画的播放方式、时长和循环。
解决方案
实现旋转和进度条加载动画，我们可以从最基础的结构开始。
1. 旋转加载动画
立即学习“前端免费学习笔记（深入）”；
一个常见的旋转加载动画是利用一个简单的div元素，通过边框和border-radius创建圆形，然后让它持续旋转。
html结构：
<div class="spinner-container"> <div class="spinner"></div> </div>
CSS样式：
.spinner-container { display: flex; justify-content: center; align-items: center; min-height: 100px; /* 示例高度 */ } .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
这个spinner通过border-top制造了一个缺口，然后无限循环旋转。我个人觉得这种最基础的旋转效果，虽然简单，但在很多场景下已经足够表达“正在加载”的意图了，而且性能开销极小。
2. 进度条加载动画
进度条通常是一个容器内部有一个填充元素，填充元素从无到有或从左到右逐渐伸展。
HTML结构：
<div class="progress-bar-container"> <div class="progress-bar"></div> </div>
CSS样式：
.progress-bar-container { width: 300px; height: 20px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; /* 确保进度条不溢出 */ margin-top: 20px; /* 示例间距 */ } .progress-bar { height: 100%; width: 0; /* 初始宽度为0 */ background-color: #28a745; /* Green */ border-radius: 10px; animation: fill-progress 2s forwards; /* 动画持续2秒，结束后停留在最后一帧 */ } @keyframes fill-progress { 0% { width: 0%; } 100% { width: 100%; } }
这里的forwards关键字很重要，它让动画结束后停留在100%的完成状态，而不是回到初始的0%。实际应用中，进度条的宽度可能需要通过JavaScript动态控制，以反映真实的加载进度。但如果只是一个简单的“假进度条”来提升用户体验，这种纯CSS方式就很方便。
为什么选择CSS实现加载动画，而不是JS或GIF？
选择CSS来实现加载动画，在我看来，更多是出于对性能、可维护性和灵活性的综合考量。
首先，性能是关键。CSS动画通常由浏览器直接在GPU上进行渲染，这意味着它们可以非常流畅，且不会阻塞主线程，即使在复杂页面或低性能设备上也能保持较好的表现。相比之下，JavaScript动画虽然功能强大，但频繁操作DOM或进行复杂计算可能会导致性能瓶颈，尤其是在动画帧率要求较高时。GIF动画在这方面则显得更笨重，文件体积往往较大，加载慢，且无法根据不同屏幕密度进行自适应缩放，放大后容易出现像素化，这在高清屏普及的今天是个不小的劣势。
其次是可维护性和可定制性。CSS动画的代码相对简洁直观，易于理解和修改。你只需要调整几个属性值，就能轻松改变动画的速度、颜色、大小等。而GIF动画一旦生成，就很难再修改，任何微小的调整都需要重新制作。JavaScript动画虽然提供了极高的自由度，但编写和调试起来也更复杂，特别是对于简单的加载效果，用JS可能就有点“杀鸡用牛刀”了。
最后，文件大小也是一个不得不提的优势。纯CSS动画不需要额外的图片或JS库，代码量极小，这对于优化页面加载速度非常有帮助。我一直觉得，能用CSS解决的问题，就尽量不要引入额外的资源，这样不仅减少了http请求，也让项目结构更清晰。
当然，这并不是说JS或GIF就一无是处。对于极其复杂的、需要与用户交互或精确控制时间轴的动画，JavaScript无疑是更好的选择。而对于一些特定风格的、艺术性更强的短动画，GIF也仍有其存在的价值。但对于日常的加载指示器，CSS是我的首选。
如何优化CSS加载动画的性能和兼容性？
优化CSS加载动画的性能和兼容性，这确实是开发过程中经常会遇到的挑战。我有一些经验和技巧可以分享。
性能优化方面：
- 优先使用transform和opacity： 这是最核心的原则。transform（如translate, rotate, scale）和opacity属性的改变不会触发页面布局（reflow）或重绘（repaint），它们通常由GPU直接处理，因此动画会非常流畅。尽量避免对width, height, top, left, margin, padding等属性进行动画，因为这些属性的改变会强制浏览器重新计算布局，导致性能下降，出现卡顿。
- 利用will-change： 这个css属性可以提前告知浏览器哪些元素将会被改变，从而让浏览器进行一些优化，比如提前分配图层。例如：will-change: transform, opacity;。但要注意，will-change不能滥用，因为它会消耗额外的内存，只应用于确实会发生复杂动画的元素。
- 减少不必要的DOM元素： 动画元素越多，性能开销越大。尽量用最少的DOM元素实现动画效果。
- 避免过度复杂的动画： 动画效果固然炫酷，但过于复杂的动画逻辑会增加浏览器负担。简洁明了的动画往往效果更好，也更容易优化。
兼容性优化方面：
- 添加厂商前缀（Vendor Prefixes）： 尽管现代浏览器对标准CSS动画属性的支持已经很好了，但为了兼容一些老旧浏览器或特定内核，仍然建议使用Autoprefixer这样的工具来自动添加-webkit-, -moz-, -o-等前缀。
- 考虑prefers-reduced-motion： 这是一个用户偏好媒体查询。有些用户可能对动画敏感，或者处于低功耗模式，他们会设置系统偏好来减少动画。我们可以利用它来提供一个更简洁、无动画的替代方案：
@media (prefers-reduced-motion: reduce) { .spinner, .progress-bar { animation: none !important; /* 禁用动画 */ /* 或者提供一个静态的加载图片 */ } }我觉得这不仅是兼容性问题，更是一种用户体验的考量，体现了对用户偏好的尊重。
- 优雅降级： 对于不支持CSS动画的极少数浏览器，确保页面仍然可用。例如，可以提供一个静态的加载图片作为备选，或者直接隐藏加载动画，让用户等待，虽然体验差一点，但至少功能不受影响。
除了旋转和进度条，CSS还能制作哪些创意加载效果？
CSS动画的潜力远不止旋转和进度条，很多时候我甚至会尝试一些看起来有点“怪异”的组合，效果反而出奇的好。这里列举一些常见且富有创意的CSS加载效果：
-
点阵跳动/涟漪效果 (Dot Animations/Ripple Effects):
- 通过多个小圆点（div或伪元素），结合animation-delay和transform: translateY()或scale()，实现小点依次跳动、放大缩小或渐隐渐现的效果。
- 例如，三个点依次上下跳动，或者一个点向外扩散形成涟漪。
- 关键属性：transform, opacity, animation-delay。
-
线条绘制/描边动画 (Line Drawing/Stroke Animations):
- 利用SVG图形（如圆形、路径）结合CSS的stroke-dasharray和stroke-dashoffset属性，可以实现线条从无到有逐渐绘制出来的效果。
- 这种动画给人一种精致、有条不紊的感觉，特别适合在数据加载或图形分析场景中。
- 关键属性：SVG的stroke-dasharray, stroke-dashoffset, animation。
-
脉冲/呼吸效果 (Pulse/Breathing Effects):
- 一个元素（比如一个图标或文本）周期性地放大缩小或改变透明度，模拟心跳或呼吸。
- 这通常通过transform: scale()或opacity的@keyframes来实现。
- 这种动画比较柔和，适合作为不那么紧急的加载提示，或者表示某个状态的持续存在。
-
形变/液态动画 (Morphing/Liquid Effects):
- 结合border-radius、transform和box-shadow等属性，可以制作出元素从一个形状平滑过渡到另一个形状的动画，甚至模拟液体的流动感。
- 这需要更精巧的@keyframes设计，可能涉及到多个属性的同时变化。
- 例如，一个方形变成圆形再变回方形，或者一个点分裂成多个点再聚合。
-
粒子效果 (Particle Effects):
- 虽然复杂的粒子效果通常需要JavaScript，但简单的CSS粒子效果可以通过伪元素和随机的animation-delay、transform来实现。
- 例如，一些小方块或小圆点从中心向外扩散然后消失，模拟数据流或加载过程中的“能量”。
这些创意效果的实现，往往需要更多的想象力，以及对CSS属性和@keyframes的深入理解。有时我会在CodePen上看到一些令人惊叹的纯CSS动画，它们都在提醒我，CSS的可能性远比我们想象的要大。
