带有闪烁边框的表格单元格

Question

我正在制作一个用户界面，我需要在其中突出显示表格中的单元格。我已经为别的东西使用了颜色，所以我需要使用边框。我创建了 css 来将边框更改为虚线，但这并没有突出显示。我想知道是否有任何方法可以为边框设置动画，以便它们闪烁或圆形（典型的虚线边框动画）。我尝试了@keyframes 和动画，但失败了。

我很高兴用 javascript 来做，但我不能使用 jQuery 或任何其他框架。

如果有人对突出显示单元格有任何其他建议，那也可能有所帮助。

我使用的测试代码是这样的：

<table class="t">
    <tr>
        <td class="t">1</td>
        <td class="t top">2</td>
        <td class="t">3</td>
    </tr>
    <tr>
        <td class="t left">4</td>
        <td class="t middle">5</td>
        <td class="t right">6</td>
    </tr>
    <tr>
        <td class="t">7</td>
        <td class="t bottom">8</td>
        <td class="t">9</td>
    </tr>
</table>    

CSS：

table.t {
    border-collapse: collapse;
    border:1px;
    table-layout:fixed;
}

td.t {
    border: 1px solid black;
    width: 50px;
}

td.top {
    border-bottom: 1px dashed black;
}
td.left {
    border-right: 1px dashed black;
}
td.right {
    border-left: 1px dashed black;
}
td.bottom {
    border-top: 1px dashed black;
}
td.middle {
    border: 1px dashed black;
}

Jsfiddle在这里可用

Answer 1

不确定您正在寻找什么，但这里有一个简单的关键帧，它应用了框阴影和一个改变透明度的关键帧……当然，您必须添加适当的供应商前缀。

CSS

td.selected {
    -webkit-animation: pulse-border 1s infinite;
}

// pulsing border
@-webkit-keyframes pulse-border {
    from, to { box-shadow: 0 0 0 0 black;}
    50% { box-shadow: 0 0 0 4px black; }
}

// flash the cell contents if applied to cell
@-webkit-keyframes flash {
    from, to { opacity: 1 }
    50% { opacity: 0 } 
}

演示

编辑

也为了好玩而制作了这个......旋转型边框。演示......因为所有额外的元素，所以有点糟糕。