AI 摘要：本文通过构建粒子效果的案例，揭示了在 CSS 中实现颜色动态变化时会遇到的限制（如 RGB 插值导致灰色过渡），并提出利用 CSS filter 中的 hue-rotate() 作为更佳的解决方案。同时，作者还演示了如何使用随机性和闪烁效果（twinkling）增强动画的自然感受，最后预告了即将上线的动画课程。

1. 引言：粒子特效与颜色变化的重要性
• 粒子从随机颜色开始，逐渐淡出时改变色相 (hue)
• 动画核心在于“颜色渐变”而非单一随机取色

2. 颜色生成的方式
• 使用 RGB 随机值生成色彩 → 结果缺乏统一风格
• 使用 HSL 固定饱和度和亮度，只在色相上变化 → 形成更加统一的色调效果

3. 从单一颜色到颜色过渡
• 初步尝试利用 HSL 渐变 → 浏览器实际以 RGB 插值，导致过渡中间产生灰度色
• HSL 的 0° 与 360° 等效，无法实现完整色相轮动画

4. CSS 渲染限制：RGB 插值问题
• color-transition 过程中浏览器默认以 RGB 渠道计算
• 中间值往往失真，无法表现我们感知的平滑色相变化

5. CSS filter 的解决方案
• 使用 filter: hue-rotate() 实现真实的色相旋转
• 可实现超过 180° 的平滑过渡
• 注意：该方法常使颜色显得更暗，需要选择更亮或低饱和度的初始色

6. 增强动画的细节：Twinkling 闪烁效果
• 使用 keyframes + 随机参数产生轻微闪烁，避免所有粒子同步
• 过渡不再是死板的线性透明度衰减，而是更自然的消隐效果

Joshwcomeau

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…