Question

我有一个带有重复背景图像的元素，然后我为背景位置设置动画，使我的背景无限移动，然后我很高兴，因为我得到了理想的效果。但是当我听到我的电脑风扇响亮而我检查CPU使用率非常高时，幸福就消失了。

有没有办法获得CSS属性的硬件加速，以及其他着名的translate3d(0,0,0)转换？如果没有，我可以通过transform: translate(...)的某种黑客来达到同样的效果吗？最后，如果用CSS无法完成，我可以接受画布解决方案。它是一个在右上角到左下方向上移动的重复图案。

Answer 1

如果您将keyframes与CSS animation一起使用，则可以轻松完成此操作。此解决方案仅涉及创建一个额外的背景图像列，并将减少CPU负载。 JSFiddle

动画CSS：

-webkit-animation: slide 2s linear infinite;
   -moz-animation: slide 2s linear infinite;
        animation: slide 2s linear infinite;

关键帧CSS（100px代表各个背景图像的宽度）：

@-webkit-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

@-moz-keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

@keyframes slide
{
    0%   {background-position: 0 0;}
    100% {background-position: 100px 0;}
}

HW加速了除转换之外的CSS属性

1 个答案: