小编Del*_*Pro的帖子

关键帧 - 渐变背景没有动画

我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化,但没有动画。

#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}

@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}

@keyframes background-gradient {
0% {background: radial-gradient(circle at …
Run Code Online (Sandbox Code Playgroud)

css radial-gradients keyframe css-animations

2
推荐指数
1
解决办法
3545
查看次数

标签 统计

css ×1

css-animations ×1

keyframe ×1

radial-gradients ×1