- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
此代码在 Chrome 上使用了我 40% 以上的 CPU。
body {
-webkit-animation: swapwall 20s infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes swapwall {
0%{background-image:url(img1.png);}
20%{background-image:url(img2.png);}
25%{background-image:url(img3.png);}
45%{background-image:url(img4.png);}
50%{background-image:url(img5.png);}
70%{background-image:url(img6.png);}
75%{background-image:url(img7.png);}
95%{background-image:url(img8.png);}
100%{background-image:url(img9.png);}
}
我不明白为什么。代码有问题吗?我尝试在代码中添加硬件加速但没有任何改变。有什么我可以做的吗?还是其他一些使用更少 CPU 的方式,我可以用我的 css 更改背景图像?
看来我可以制作一个 GIF 来绕过这个并将其用作背景,但我的图像是 1920x1080,所有 GIF 制作者都小于 500x500。我发现一个创建 1500x844 的,但它没有过渡选项。
编辑:我设法从带有图像的视频创建了一个 15 秒的 GIF,但它仍然消耗大量 CPU,而且质量低得多。
Edit2:可能是 Chrome 问题?
body{background-color:#111111;}
#inlineContent {
pointer-events: none;
display: block !important;
}
#inlineContent:before {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image:
url(http://i.imgur.com/nncl4M8.png),
url(http://i.imgur.com/yc91VzR.png),
url(http://i.imgur.com/LjTST41.png);
animation: Falling 20s linear infinite;
-moz-animation: Falling 20s linear infinite;
-webkit-animation: Falling 20s linear infinite;
z-index: 102;
}
@keyframes Falling {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
@-moz-keyframes Falling {
0% {background-position: 0 0, 0 0, 0 0; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes Falling {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
.Falling {
animation-name: Falling;
-moz-animation-name: Falling;
-webkit-animation-name: Falling;
}
http://scratchpad.io/impolite-harmony-1298
在 Chrome 和 Edge 上测试。 Chrome:大约 12% 的 CPU 使用率,Edge:大约 2% 的 CPU 使用率。
最佳答案
听起来好像您只是在重载它。 9 张 1920x1080 的图像通常是一个相当大的重量。这些图像的总文件大小是多少?你压缩了吗?您是否有代码演示的链接,以便我可以更仔细地查看所有内容?
编辑:
经过一番挖掘,我发现了这个答案:https://stackoverflow.com/a/13293044/3909886建议将 transform: translateZ(0);
添加到您的类中,然后应该允许您使用 GPU 加速的浏览器。
编辑2:
我认为问题出在图像的像素宽度上。使用以下代码时:
background-size: cover;
-webkit-animation: swapwall 5s infinite;
-webkit-animation-timing-function:linear;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(0);
margin: auto;
width: 500px;
height: 500px;
我的 CPU 使用率下降到 30%。我只假设浏览器在处理每次交换时需要更新的图像的实际大小(像素数)。
关于CSS背景图片动画,CPU占用率高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33313180/
我是一名优秀的程序员,十分优秀!