[分享]css3怎样让背景图片移动

CSS3中提供了很多有趣的特性，比如让背景图片动起来。

 .bg {
    background-image: url('bg.jpg');
    background-size: cover;
    animation: move 10s linear infinite;
  }
  @keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 100% 0;
    }
  } 

以上代码就是让一个背景图片横向移动的代码。首先，我们给元素设置一个背景图片，并让它占据整个元素的面积。然后，我们使用animation属性来定义一个动画，名字叫做move，时长为10秒，缓冲方式为线性，次数为无限。最后，在@keyframes里定义动画过程，从0%的位置开始，背景图片的位置是0 0，即左上角，到100%的位置，背景图片的位置是100% 0，即右上角。

有了以上代码，我们就可以让一个背景图片平滑地横向移动了。当然，我们也可以让它竖向移动，只需要改变background-position的值就可以了。

 .bg {
    background-image: url('bg.jpg');
    background-size: cover;
    animation: move 10s linear infinite;
  }
  @keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 100%;
    }
  } 

以上代码就是让一个背景图片竖向移动的代码。

总之，利用CSS3的animation和@keyframes属性，我们可以让背景图片做出很多有趣的动画效果。