我有一个动画用于交替
body
并更改其背景颜色。一切工作正常,但是当动画运行时,我可以看到我的 CPU 处于 100%。起初我以为这可能是由于 @keyframes
造成的,但是当我更改颜色交替的代码时,我发现 CPU 过载明显下降,持续下降 40%。所以我明白这可能是由于动画。
这是我的 CSS 代码:
body {
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
background-size: 600% 100%;
background-repeat: repeat;
background-attachment: fixed;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}
@keyframes gradient {
0% {
background-position: 0%
}
100% {
background-position: 100%
}
}
有人可以帮助我吗?
通过考虑伪元素来使用变换:
html::before {
content: "";
position: fixed;
z-index:-2;
top: 0;
left: 0;
width: 600%;
bottom: 0;
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
animation: gradient 16s linear infinite alternate;
}
@keyframes gradient {
100% {
transform: translateX(-83.33%) /* 5/6x100% */
}
}
嗯,在您获得大量“声誉”点之前,该网站不允许发表评论或点赞。但我想在这里发布,Temani 的解决方案非常适合我。我已经准备好删除动画了。有了这个 HTML 伪元素版本,我的 CPU 使用率下降了,所以现在我可以在我正在构建的网站上保留动画渐变背景 - 谢谢!!!!!!