前端彩色背景

div {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-size: 1000% 100%;
  animation: smooth-transition 5s infinite  alternate

;
}

@keyframes smooth-transition {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

linear-gradient() 函数创建一个彩色的线性渐变背景。指定的颜色值从 red 开始，依次过渡到 orange、yellow、green、blue、indigo，最后到达 violet

background-size: 1000% 100%;：这一行设置背景图像的尺寸。我们将水平方向的大小设置为 1000%，这样背景图像会被拉伸以适应 <div> 元素的宽度animation: smooth-transition 5s infinite;：这一行为 <div> 元素添加动画效果。动画的名称是 smooth-transition，持续时间为 5s，并且设置为无限循环。

@keyframes smooth-transition：这一行定义了一个名为 smooth-transition 的关键帧动画

0% { background-position: 0% 50%; }：这一行表示动画开始时，背景图像的位置位于水平方向的 0%（最左边）和垂直方向的 50%（垂直居中）

100% { background-position: 100% 50%; }：这一行表示动画结束时，背景图像的位置位于水平方向的 100%（最右边）和垂直方向的 50%（垂直居中）。

0% -100%相当于是颜色加载的百分比，比如红黄蓝绿，初始50%  差不多打开页面显示的颜色在黄蓝区间开始