html - 如何在 :after 伪元素中添加动画 gif

Question

我想使用:after伪元素附加一个动画 gif：

#shipment-history tbody .history-row .enroute:after {
    content:url(https://susscargologistics.com/wp-content/uploads/2020/04/green.gif);
    clear:both;
    height:20px;
    width:20px;
}

我试过上面的代码。它确实显示了图像，但它不是动画的。高度和宽度也不起作用。

标签： htmlcss

Answer 1

您可以将 gif 用作background-imageinto 伪元素，而不是在content.

#shipment-history tbody .history-row .enroute:after {
    content:'';
    clear:both;
    height:20px;
    width:20px;
    display:block;
    background-image: url(https://susscargologistics.com/wp-content/uploads/2020/04/green.gif);
    background-size:100%;
}

<table id="shipment-history">
<tbody>
  <tr class="history-row">
    <td class="enroute"></td>
  </tr>
</tbody>
</table>