创建渐变背景色动画特效的CSS代码

以下是一个使用CSS创建渐变背景色动画特效的代码示例：

html

/* 设置一个带渐变背景色的方形块 */
.square {
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
}

/* 设置动画效果 */
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* 应用动画效果 */
.square {
animation: gradientAnimation 3s linear infinite;
}

该示例中，我们创建了一个名为 `square` 的方形块，使用 `linear-gradient` 函数设置了一个从红色到绿色的水平线性渐变背景色。

然后，我们通过 `@keyframes` 规则创建了一个名为 `gradientAnimation` 的动画，其中定义了背景色位置的关键帧动画。

最后，我们通过将 `animation` 属性设置为 `gradientAnimation 3s linear infinite`，在 `square` 类上应用了动画效果。这将使背景色在3秒的时间内从最左边移到最右边，并循环播放。