为什么我的背景渐变在我的CSS代码中不起作用

Question

这是我的代码，渐变不在我的CSS代码中运行

body{
    background-image: linear-gradient(45deg, #153b6a,#1a5981,#31829d,#8abac8,#c5e9e8 );
    background-repeat: repeat-x;
    background-size: 100% 100%;
    animation: gradient 10s linear infinite;

Answer 1

您希望背景大于基础画布，并允许该位置动画化。

试试这个

body{
background-image: linear-gradient(45deg, #153b6a, #1a5981, #31829d, #8abac8, #c5e9e8);
background-size: 200% 200%;
animation: gradient 10s ease infinite;
}

@keyframes gradient {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}

}