Question

如何将div的背景颜色从最亮的橙色到最暗的红色以及背面（这应该使它看起来像发光效果）的动画效果？

我创建了一个jsFiddle，但它只将颜色从浅灰色（静态设置）更改为红色。这就是我的意思。

我确实发现了一些关于动画颜色的问题，但没有关于多种颜色的问题。

非常感谢任何帮助。

Answer 1

将此CSS添加到您的div。 http://jsfiddle.net/Nillervision/a4ELz/

.test {
    overflow: hidden;
    text-align: center;
    font-family: sans-serif;
    font-size: 40px;
    line-height: 3;    
    -webkit-animation: glow linear 1s infinite; 
    animation: glow linear 1s infinite;
} 
@-webkit-keyframes glow { 
    0% { background-color:red; }
    50% { background-color:orange; }
    100% { background-color:red; } 

} 
@keyframes glow { 
    0% { background-color:red; }
    50% { background-color:orange; }
    100% { background-color:red; } 
}

如果您只希望动画在pageload上运行一次，请删除“无限”值。如果你想在悬停时发生效果，你可以使用css过渡。

动画背景颜色为不同的颜色

1 个答案: