[分享]css3怎么给背景图片加动画效果

CSS3作为近几年最流行的前端技术之一，提供了丰富的样式属性和动画效果，今天我们来学习如何给背景图片加动画效果。.bgimg { backgroundimage: url(bgimg.jpg); ba...

CSS3作为近几年最流行的前端技术之一，提供了丰富的样式属性和动画效果，今天我们来学习如何给背景图片加动画效果。

.bg-img {
  background-image: url('bg-img.jpg');
  background-size: cover;
  animation: bg-slide 10s ease-in-out infinite;
}

@keyframes bg-slide {
  0% {
    background-position: 0% 50%;
  }
  
  100% {
    background-position: 100% 50%;
  }
} 

首先我们需要给元素设置一个背景图片，可以使用background-image属性，这里我们假设图片为'bg-img.jpg'。为了保证图片尺寸适应元素，我们还需要使用background-size属性设置为cover。

接着我们使用animation属性给背景图片添加一个动画效果。在这个例子中，我们给动画起了一个名字'bg-slide'，时间为10秒，动画速度为ease-in-out，并且让它无限循环。

最后，我们使用@keyframes规则定义动画的具体效果。在这里我们设置了两帧，分别是0%和100%。在0%的时候，我们让图片位置在左侧50%处，而在100%时，我们让图片位置到达右侧50%处。这样就形成了一个图片横向移动的动画效果。

通过以上代码，我们就成功地给背景图片加上了一个流畅的动画效果。