使用非常大的背景位置偏移是否存在性能问题？
我正在构建一个进度条控件，并且正在研究它实际上并不显示进度，而只是旋转“正在发生某事”的指示器的情况。我的设计基本上是交替的对角条纹，本质上是一个像这样的理发杆，但是“旋转”：
由于希望将尽可能多的负载转移给渲染引擎，我想为此使用 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';
：是否存在任何性能问题：
- 转换这么长时间
- 拥有
background-position: -1000000px 0？
或者，您有更好的解决方案吗？
I'm building a progress bar control, and I'm working on the case where it doesn't actually show progress, but just spinning indicator of "something is happening". The design I have for it is basically alternating diagonal stripes, essentially a barber pole kinda like this, but "spinning":
With the hopes of offloading as much as I can to the rendering engine, I want to use CSS transitions for this. Supporting old browsers is not a concern for me.
So, my first idea was to basically do this:
.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;
}
... and then, when it gets rendered to the screen, use Javascript to essentially do this:
myBarberPole.style.backgroundPosition = '-1000000px 0';
Are there any performance issues about:
- Transitioning for that long
- Having
background-position: -1000000px 0?
Alternatively, do you have a better solution?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为不会有任何性能问题。并不是因为您使用大数字，它们才使用更多的 CPU 或内存。
I don't think there could be any performance issues. It's not because you use big numbers that they use more CPU or memory.
在没有“链接”过渡到自身的情况下（据我所知，没有纯 CSS 方式来告诉过渡何时完成），这可能是一个很好的解决方案，但正如 Justin 所说，它需要一个巨大的图像！使用好的老式 GIF 动画有什么问题吗？
In the absence of 'chaining' transitions to themselves (as far as I know there is no pure-CSS way of telling when the transition has finished) this could be a good solution, but as Justin says it requires a massive image! Is there any problem with using a good old-fashioned animated GIF?