本文介绍了动画线性渐变吞噬CPU使用率的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个动画，用于交替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% */
}
}这篇关于动画线性渐变吞噬CPU使用率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！