css中怎样添加动态图

CSS中怎么添加动态图？

实际上，在CSS中添加动态图并不是一件难事。你可以使用CSS动画和字体图标等技术，实现各种炫酷的动效。 

CSS动画：

使用CSS动画添加动态图可以通过关键帧（@keyframe）实现。下面的代码演示了如何让一个图片在网页中左右移动。

/*CSS代码*/
@keyframes example {
  0% {
    left: 0px;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0px;
  }
}

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

字体图标：

使用字体图标添加动态图可以使用font-face属性和iconfont技术。iconfont是一种字体文件，其中包含了各种图标。 

/*CSS代码*/
@font-face {
  font-family: 'iconfont';  /*字体名称*/
  src: url('iconfont.eot'); /*支持IE9及以下版本*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont.woff2') format('woff2'),
       url('iconfont.woff') format('woff'),
       url('iconfont.ttf') format('truetype'),
       url('iconfont.svg#iconfont') format('svg');
}

.icon {
  font-family: "iconfont";//使用刚刚定义的字体图标
  font-size: 40px;//定义字体大小
  color: #000000;//定义字体颜色
  animation: rotate 2s linear infinite;//使用动画效果，使图标旋转
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

通过CSS的这些技术，可以让网页不仅美观，更具有丰富的动态效果和交互性。