JS实现背景图的颜色实时渐变

渐变通过@keyfram动画实现，通过不断改变背景颜色的位置。

1. 首先设置大盒子的高度为100vh，宽度为100%，覆盖整个页面

2. 设置背景颜色：通过background的渐变属性 linear-gradient设置：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

其中停止位置可选

3. CSS动画：

1. animation: name duration timing-function delay iteration-count direction fill-mode play-state；

其中name为绑定到选择器的关键帧的名称，也就是@keyframs后面的名字。

duration：为动画时长

iteration-count：为播放次数：infinite：无限次

animation-timing-function：linear 匀速

CSS代码：

#app {
  width: 100%;
  height: 100vh;
  background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
  background-size: 500%;
  animation: bgAnimation 15s linear infinite;
}
//定义动画
@keyframes bgAnimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;

  }
  100%{
    background-position: 0% 50%;

  }
}

效果图：