我正在制作一个用户界面,需要在其中突出显示表格中的单元格。我已经将着色用于其他用途,因此需要使用边框。我创建了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在这里可用
不确定所要查找的是什么,但是这里有一个简单的关键帧,它应用了一个框阴影,一个更改了透明度。当然,您必须添加适当的供应商前缀。
的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 }
}
编辑
也使这个有趣。旋转型边框。演示...由于所有其他元素,实在太烂了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句