css中怎样插入动图

使用CSS插入动图可以让网页看起来更加生动有趣。在CSS中插入动图的方法有多种，下面为大家介绍其中两种常见方法。
1. 使用background-image插入动图
使用CSS中的background-image可以插入一张图片作为背景，也可以插入一张动态图片。具体方法如下：
首先，在HTML中通过img标签将动图插入。

<img src="test.gif" alt="动图"> 

然后，在CSS中选择需要插入动图的元素，使用background-image属性将动图作为其背景图。

p {
  background-image: url(test.gif);
  background-size: cover;
} 

其中，background-size: cover可将背景图自适应到整个元素。
2. 使用CSS3动画插入动图
CSS3中提供了多种动画效果，也可以利用这些效果插入动图。具体方法如下：
首先，在HTML中通过img标签将动图插入。

<img src="test.gif" alt="动图"> 

然后，在CSS中选择需要插入动图的元素，并使用@keyframes定义动画，使用animation属性来调用动画。

p {
  position: relative;
}

@keyframes example {
  0% {left: 0;}
  50% {left: 50px;}
  100% {left: 0;}
}

img {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
} 

其中，@keyframes定义了一个名为example的动画，将图片从左边移动到右边再移回来。animation-name调用这个动画，animation-duration控制动画完成时间，animation-iteration-count控制动画重复次数。
总的来说，使用CSS插入动图可以让网页变得更加生动有趣。以上两种方法仅为其中的两种，希望能对大家有所帮助。