Question

我有一个以编程方式创建的 n 行的表，并且在每行上我以编程方式将一个类添加到odd行的不同even行中。其中一些行有一个需要突出显示的“特殊”内容，为此我在行上使用闪烁的背景：

HTML

<table>
    <tr class='blink odd'>
        <td>first row, very important</td>
    </tr>
    <tr>
        <td>second row</td>
    </tr>
    <tr class='odd'>
        <td>third row</td>
    </tr>
    <tr>
        <td>fourth row</td>
    </tr>
    <tr class='odd'>
        <td>fifth row</td>
    </tr>
    <tr class='blink'>
        <td>sixth row, also important</td>
    </tr>
</table>

CSS

@-webkit-keyframes 'blink' {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: none }
    100% { background: rgba(255,0,0,0.5); }
}
.blink {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;   
}
table tr.odd{
    background: gray;
}

我遇到的问题是闪烁行将背景从红色淡白色变为红色，而我希望它们切换背景来自红色＆gt;到当前行背景颜色

例如：在奇数行上，BG应该在红色和灰色之间变换。在偶数行上，BG应该在红色和（在这种情况下）no-BG之间变换。

这可以用css实现而不设置两个关键帧（一个用于奇数，一个用于偶数行）？

谢谢

Answer 1

你实际上是在声明background，所以它会覆盖你的灰色，所以不要声明背景......

@-webkit-keyframes blink {
    50% { background: rgba(255,0,0,0.5); }
}

Demo

Demo 2 （已添加-moz和标准属性）

注意：我已将.odd课改为table tr:nth-child(odd) 将保存您自己在HTML中声明类，因为如果您可以选择动画而不是确定您不希望支持旧版浏览器。如果您出于某种特定原因使用，那么您可以自己坚持使用调用类：）

并且您不需要单词blink

附近的引号

防止CSS3闪烁背景颜色覆盖

1 个答案: