gpt4 book ai didi

css - 关键帧 - 渐变背景不是动画

转载 作者:太空宇宙 更新时间:2023-11-04 06:10:59 29 4
gpt4 key购买 nike

我正在尝试使用@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 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);}
}
<div id="mydiv"></div>

我尝试只使用纯色,效果很好(例如背景:红色,背景:黄色...)。

我在我的渐变上尝试了背景图像而不是仅仅背景,它没有帮助。

你有什么建议或知道如何动画交换的解决方案吗,所以它不仅仅是快速交换颜色,而是从一种颜色逐渐交换到另一种颜色。

最佳答案

不幸的是,背景渐变是不可动画的

幸运的是,您当前的设计不需要对渐变进行动画处理,因为外部颜色是恒定的。

只需将渐变设为透明,并在下方设置纯色变化

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

@keyframes background-gradient {
0% {
background-color: #ff0000;
}
25% {
background-color: yellow;
}
50% {
background-color: #3333cc;
}
75% {
background-color: #00ffcc;
}
100% {
background-color: #cc9900;
}
}
<div id="mydiv"></div>

关于css - 关键帧 - 渐变背景不是动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56409340/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com