css3 背景动画特效 |css flex 0 0 auto

/* 线性渐变背景动画 */
background: linear-gradient(to bottom, #4b0d9c, #e91e63);
background-size: 400% 400%;
animation: GradientBG 10s ease infinite;
@keyframes GradientBG {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
/* 径向渐变背景动画 */
background: radial-gradient(circle, #f8b500, #ff5400);
background-size: 400% 400%;
animation: GradientBG 10s ease infinite;
@keyframes GradientBG {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
/* CSS3雪花背景动画 */
background-image: url("snowflakes.png");
background-size: 200px 200px;
animation: snowflakes 20s linear infinite;
@keyframes snowflakes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 200px;
}
}
/* CSS3水波动画 */
background: #000;
background-size: 50px 50px;
animation: wave-anim 3s infinite linear;
@keyframes wave-anim {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
/* CSS3背景图像缩放动画 */
background: url("image.jpg") no-repeat center center fixed;
background-size: cover;
animation: zoom-in-out 20s ease-in-out infinite;
@keyframes zoom-in-out {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(2);
}
}

以上是几种常见的CSS3背景动画特效的示例。通过这些特效，你可以使网页更加生动有趣，为用户带来更好的使用体验。