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