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%; }
}
alternate：循环颜色，例如一开始向右(to right) 那么执行完之后就会向左再滚动，不会导致切换颜色太突兀
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% 差不多打开页面显示的颜色在黄蓝区间开始