动画线性渐变吞噬CPU使用率

animated linear gradient devouring CPU usage(动画线性渐变吞噬CPU使用率)

本文介绍了动画线性渐变吞噬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使用率的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:动画线性渐变吞噬CPU使用率

基础教程推荐