7

我正在构建一个进度条控件，并且我正在研究它实际上并未显示进度，而只是显示“正在发生某事”的旋转指示器的情况。我的设计基本上是交替的斜条纹，基本上是一个有点像这样的理发杆，但是“旋转”：

理发杆进度条

希望尽可能多地卸载到渲染引擎，我想为此使用 CSS 过渡。支持旧浏览器对我来说不是问题。

所以，我的第一个想法是基本上这样做：

.barber-pole {
    background-image: url(repeating-slice.png);

    /* set a very long (one hour!) transition on the background-position */
    transition: background-position 3600s linear 0s;
}

...然后，当它被渲染到屏幕上时，使用 Javascript 基本上做到这一点：

myBarberPole.style.backgroundPosition = '-1000000px 0';

是否存在以下性能问题：

  1. 过渡那么久
  2. 有background-position: -1000000px 0?

或者，您有更好的解决方案吗？

4

2 回答 2

2

我认为不会有任何性能问题。这不是因为您使用大数字，他们使用更多的 CPU 或内存。

于 2011-06-14T14:00:16.580 回答
0

在没有“链接”过渡到自己的情况下（据我所知，没有纯 CSS 方式来判断过渡何时完成），这可能是一个很好的解决方案，但正如贾斯汀所说，它需要一个巨大的图像！使用好的老式动画 GIF 有什么问题吗？

于 2011-06-14T14:07:43.043 回答