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

Question

我需要制作动画 table，如下图所示：

结构为

<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 并移动它从左到右使用动画。但是我不能硬编码 height 属性所以我不能以这种方式使用。你能给我一个更好的方法吗？

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>

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

How to animate the background of table with a white gradient using CSS3

html

css

animation

linear-gradients