如何使用CSS3使用白色渐变为表格的背景设置动画

Question

我需要像下图中的动画表：

结构是

<table>
    <thead></thead>
    <tbody class='table-body'>
        <tr></tr> <!-- It can be any number of rows -->
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </tbody>
</table>

我试着这样做

.table-body {
  background: linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8);
  background-size: 200% 200%;
  animation: Animation 3s ease infinite;
}

@-webkit-keyframes Animation {
  0%{
    background-position-x: 0%
  }
  100%{
    background-position-x: 100%
  }
}

此外，我尝试在设置after .table，position: absolute;，width的{​​{1}}上添加height，然后从左侧移动background-color右边使用动画。 但我不能硬编码高度属性，所以我不能这样使用。 你能给我一个更好的建议吗？

Answer 1

我好运以下。请注意添加td，更改最终关键帧的背景位置，以及切换关键帧的顺序。

<table>
    <thead></thead>
    <tbody class='table-body'>
        <tr><td>Text goes here</td></tr>
        <tr><td>Text goes here</td></tr>
        <tr><td>Text goes here</td></tr>
        <tr><td>Text goes here</td></tr>
    </tbody>
</table>

<style>
.table-body {
  background: linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8);
  background-size: 200% 200%;
  animation: Animation 3s linear infinite;
}

@-webkit-keyframes Animation {
  0%{
    background-position-x: 200%
  }
  100%{
    background-position-x: 0%
  }
}
</style>