Css 关键帧-渐变背景未设置动画
我正在尝试使用@keyframes设置背景交换动画。背景是径向梯度。背景发生了变化,但没有设置动画Css 关键帧-渐变背景未设置动画,css,css-animations,keyframe,radial-gradients,Css,Css Animations,Keyframe,Radial Gradients,我正在尝试使用@keyframes设置背景交换动画。背景是径向梯度。背景发生了变化,但没有设置动画 #mydiv{ 背景:径向梯度(90%80%的圆,#ff0000,#4d0019); 宽度:100%; 高度:1246px; 位置:相对位置; 溢出:隐藏; 动画:背景渐变5s; 动画迭代次数:无限; 背面可见性:隐藏; 动画计时功能:轻松进出; } @-webkit关键帧背景渐变{ 0%{背景:径向梯度(90%80%的圆,#ff0000,#4d0019)} 25%{背景:径向梯度(90%80%
#mydiv{
背景:径向梯度(90%80%的圆,#ff0000,#4d0019);
宽度:100%;
高度:1246px;
位置:相对位置;
溢出:隐藏;
动画:背景渐变5s;
动画迭代次数:无限;
背面可见性:隐藏;
动画计时功能:轻松进出;
}
@-webkit关键帧背景渐变{
0%{背景:径向梯度(90%80%的圆,#ff0000,#4d0019)}
25%{背景:径向梯度(90%80%的圆,#993399,#4d0019)}
50%{背景:径向梯度(90%80%的圆,#3333cc,#4d0019)}
75%{背景:径向梯度(90%80%的圆,#00ffcc,#4d0019)}
100%{背景:径向梯度(90%80%的圆,#cc9900,#4d0019)}
}
@关键帧背景渐变{
0%{背景:径向梯度(90%80%的圆,#ff0000,#4d0019)}
25%{背景:径向梯度(90%80%的圆,#993399,#4d0019)}
50%{背景:径向梯度(90%80%的圆,#3333cc,#4d0019)}
75%{背景:径向梯度(90%80%的圆,#00ffcc,#4d0019)}
100%{背景:径向梯度(90%80%的圆,#cc9900,#4d0019)}
}
不幸的是,背景渐变无法设置动画
幸运的是,您当前的设计不需要设置渐变动画,因为外部颜色是恒定的
只需将渐变设置为透明,并在其下方设置一个实心渐变颜色
#mydiv{
宽度:100%;
高度:600px;
位置:相对位置;
溢出:隐藏;
动画:背景渐变5s;
动画迭代次数:无限;
背面可见性:隐藏;
动画计时功能:轻松进出;
背景图像:径向梯度(90%80%的圆形,透明,#4d0019);
}
@关键帧背景渐变{
0% {
背景色:#ff0000;
}
25% {
背景颜色:黄色;
}
50% {
背景色:#3333cc;
}
75% {
背景色:#00ffcc;
}
100% {
背景色:#cc9900;
}
}