实现表格行的闪烁效果

想要实现点击一个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”，就可以实现效果了，这里忘记截图了。

实现表格行的闪烁效果

实现表格行的闪烁效果

猜你喜欢