html - 如何使用 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%
  }
}

我还尝试在 .table 上添加 after 设置为 position: absolute; width, 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>