假设你有一个可以无限循环的背景图像,我发现使用 CSS3 时,简单的动画会占用我 PC 内存的 50%,这个数字很大,但我还没有尝试过使用 jQuery。
你有什么想法?哪一个消耗更少的 PC 内存?
这是我的 Webkit CSS3 代码:
.stars_back {
background: url('stars.png') repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -10;
-webkit-animation-name: star-back; -webkit-animation-duration: 1700s;
-webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes star-back {
from { background-position: 1000% 5% }
to { background-position: 5% 5% }
}
最佳答案
动画背景图像效率不高,无论是 jQuery 还是 CSS 过渡都没有关系。我建议您添加一个包含背景图像的额外元素以应用硬件加速:
.stars_back {
/* right: 100% forces the div to be twice the intended width, parent should have overflow: hidden */
background: url('stars.png') repeat; position: absolute; top: 0; left: 0; right: 100%; bottom: 0; z-index: -10;
-webkit-animation-name: star-back; -webkit-animation-duration: 1700s;
-webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes star-back {
/* translate3d(-50%,0,0) puts the second half of the div in the viewport and then repeats*/
from { -webkit-transform: translate3d(0,0,0) }
to { -webkit-transform: translate3d(-50%,0,0) }
}
关于jQuery 与 CSS3 : Infinite background loop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16258071/