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

Quo*_*ter 0 css animation colors

如何将 a 的背景颜色div从最浅的橙色设置为最深的红色,然后设置为背景色(这应该使它看起来像发光效果)?

我创建了一个jsFiddle,但它只会将颜色从浅灰色(静态设置)更改为红色。这是我得到的。

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

任何帮助都非常感谢。

小智 6

将此 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; } 
}
Run Code Online (Sandbox Code Playgroud)

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