变色背景动画

Question

我目前正在开发一个网站，我想要一个背景在某些点改变颜色的动画。

@keyframes background_color {
    0% {
        background: #dfdfdf;
    }

    15% {
        background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf );
    }

    35% {
        background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf );
    }

    50% {
        background: #dfdfdf;
    }

    100% {
        background: #dfdfdf;
    }
} 

百分比看起来有点奇怪，但它们与另一个动画的运动相匹配。基本上，我希望颜色改变 9 次，从默认背景到颜色变回默认背景，然后用不同的颜色重复 9 次。

我尝试了java和其他类似的东西，但我不知道该怎么做。

Answer 1

你可以用 css 来做到这一点，是的，我可以看到你忘记添加“动画持续时间”。

试试这个：

/* The animation code */
@keyframes example {
    0% {background: #dfdfdf;}
    15% {background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf);}
    35% {background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf);}
    50% {background: #dfdfdf;}
    100% {background: #dfdfdf;}
} 
/* The element to apply the animation to */
body {
    background-color: #dfdfdf;
    animation-name: example;
    animation-duration: 4s;
}

您可以在此处阅读有关其工作原理的更多信息：https://www.w3schools.com/css/css3_animations.asp