实现表格行的闪烁效果
想要实现点击一个a标签,通过ID跳转到相应的表格行,设计一个表格长这样的:
<div>
<h2 id="aaa" class="page-header">表格测试</h2>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr class="highlight" id="base">
<td class="asso-td"> <a>这是a</a>
</td>
<td class="asso-td">aaaa</td>
<td class="type-td">bbbb</td>
<td>是</td>
</tr>
</tbody>
</table>
</div>
</div>
<tr class="highlight" id="base"></tr>
这里这一行的class定义成highlight,然后在style中定义样式
<head>
<style>
.highlight
{
-webkit-animation:myfirst 10s; /* Safari and Chrome */
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {
background-color: white;
color:#333;
}
50% {
background-color: #449d44;
color: white;
}
100% {
background-color: white;
color:#333;
}
</style>
</head>
@keyframes声明动画 myfirst是动画的名字。 这里我写的是适用于Chrome的@-webkit-keyframes,其他浏览器有不一样的声明。然后在highlight的类中绑定这个动画,animation是一个简写属性,这里简单定义了动画的持续时间,具体的六个属性如下表:
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
实现的动画效果在50%的时候是这样的
发现有点小问题,a标签的字体没有变化,所以要给a标签也加上class=”highlight”,就可以实现效果了,这里忘记截图了。