可以使用 CSS3 中的 linear-gradient() 函数和 keyframes 动画来实现背景渐变色的动画。这里提供一个简单的实例代码:
.page {
background: linear-gradient(-120deg, #5aebef, #d3faf4, #ddf8ff, #d9f5e8); /* 背景渐变 */
background-size: 500% 500%; /* 背景大小 */
animation: gradientBG 15s ease infinite; /* 应用动画 */
}
/* 定义 keyframes 动画 */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
上面的 CSS 代码定义了一个名为 page 的类,其中使用了 linear-gradient() 函数来创建一个背景样式。使用 background-size 属性设置背景图像的大小,使用 animation 属性来应用动画效果。
动画是使用一个名为 gradientBG 的 @keyframes 规则来定义的。
这个动画定义了三个关键帧(即 0%、50% 和 100%),分别设置了不同的背景位置。
@keyframes 后边定义的是动画关键帧,再通过 CSS 动画属性来调用即可。
这里的 animation 属性使用了 gradientBG 关键帧,它是一个无限循环的动画,持续时间为 15 秒,动画加速方式为 ease。