css如何让背景渐变动画 |css3立体旋转的代码

/* 设置元素的初始背景样式 */
div {
background: linear-gradient(to right, blue, red);
}
/* 定义背景颜色渐变动画序列 */
@keyframes bg-color {
0% {background-position: left;}
100% {background-position: right;}
}
/* 设置背景颜色渐变动画 */
div {
background-size: 200% 100%;
animation: bg-color 2s ease-in-out infinite;
}

上述代码中，大家使用linear-gradient函数来定义了水平向右的背景渐变，后面的两个参数分别是渐变起点的颜色和结束点的颜色。

接着，大家使用@keyframes定义了一个名为bg-color的动画序列，表示在0%到100%动画时间内该元素的背景位置会从左向右移动，最终停在右边。

最后，大家在div元素的样式中使用background-size属性来设置元素背景的宽度为原来的两倍，即200%。然后，再将动画属性animation应用于该元素中，对应的动画序列为bg-color，动画持续时间为2秒，动画时间函数为ease-in-out，动画无限循环。

这样，在浏览器中就能看到一个具有背景渐变动画效果的元素了。