CSS动画渐变

【问题标题】：CSS animted gradientCSS动画渐变
【发布时间】：2020-11-22 03:23:41
【问题描述】：

您好，我正在尝试使 CSS 中渐变的角度（度）变化更平滑。我想让它像滚动一样动画。

body {
  min-height: 100vh;
  min-width: 100vw;
  margin:0;
  
  background: linear-gradient(115deg, #007fff 55%, #f5fafa 45%);
}

@media only screen and (max-width: 800px) {
  body {
    background: linear-gradient(340deg, #f5fafa 60%, #007fff 40%);
  }
}

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

你不能用渐变来做到这一点，但你可以像下面这样使用旋转：

html::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  height: 150vmax;
  width: 150vmax;
  background: linear-gradient(0deg, #007fff 55%, #f5fafa 45%);
  transform: translate(-50%, -50%) rotate(115deg);
  transition: transform 1s;
}

@media only screen and (max-width: 800px) {
  html::before {
    transform: translate(-50%, -50%) rotate(155deg);
  }
}

【讨论】：