结构是
<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
,并使用动画从左向右移动。
但是我不能对高度属性进行硬编码,所以我不能以这种方式使用。
你能给我一个更好的方法吗?
最佳答案
我在以下方面很幸运。请注意 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>
关于html - 如何使用 CSS3 为表格背景设置白色渐变动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39353885/