动画背景颜色以通过 html 元素上的颜色过渡会导致 100% 的 cpu 负载答案

【问题标题】：Animating background color to transition through colors on html element causes 100% cpu load动画背景颜色以通过 html 元素上的颜色过渡会导致 100% 的 cpu 负载
【发布时间】：2026-02-10 12:45:01
【问题描述】：

我正在尝试创建一种效果，其中 html 背景上的小点在无限循环中逐渐改变颜色。我有一个 960px 居中的设计，所以背景区域可以变得相当大。

我的解决方案是将背景颜色设置为默认颜色，然后平铺一个方形灰色图像，透明角在顶部被敲掉 - 这样它就可以通过它显示背景。

然后，我使用 jQuery UI 库为不断变化的背景颜色设置动画：

  $("#root")   
      .animate({fontSize:"1em"},pause)          
      .animate( { backgroundColor: 'blue' }, transition)
      .animate({fontSize:"1em"},pause)      
      .animate( { backgroundColor: 'darkred' },transition);

这可行，但有一个大问题！

在backgroundColor 转换期间，我的 CPU (firefox) 使用率达到 100%。

所以，

这是您会使用的解决方案吗？

如果有任何想法如何整理 CPU 使用率？

还有如何循环播放动画？

【问题讨论】：

这并不让我感到惊讶，如果你这样做，整个页面正在后台重绘......

标签： jquery html jquery-ui

【解决方案1】：

也许您应该考虑用动画 GIF 或 PNG 替换点背景，而不是使用 jquery？

【讨论】：

天哪，不知道为什么我没想到！谢谢斯派克。我有把事情复杂化的习惯 :-) 希望我能以合理的文件大小获得 gif，它应该是赢家。 -约翰
gif 只需要 1x1 像素，所以文件大小应该没问题。如果动画足够流畅，那就是另一个问题了。

【解决方案2】：

从我在 SO 上读到的内容来看，100% 的 CPU 利用率似乎是长时间运行的 jquery 动画中的一个常见线程。

如果您的动画发生缓慢，请尝试使用计时器使动画以微小的增量（每 100 毫秒左右）发生，而不是执行单个 .animate() 调用以从“蓝色”变为“暗红色”。

或者使用上面建议的动画 GIF。这样可以省去很多麻烦。

【讨论】：