将背景颜色设置为不同的颜色

Question

如何将 a 的背景颜色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; } 
}

如果您只希望动画在页面加载时运行一次，请删除“infinite”值。如果您希望效果发生在悬停时，您可以改用 css 过渡。