css中怎样使图片自动翻页

在CSS中，我们可以使用transition和transform属性来实现图片的自动翻页效果。具体步骤如下：

/* 定义图片样式 */
.carousel img {
  width: 100%;
  height: 100%;
}

/* 定义轮播容器样式 */
.carousel {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* 定义图片翻页效果 */
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transform: translateX(100%);
}

.carousel img.active {
  opacity: 1;
  transform: translateX(0);
} 

其中，transition属性可以实现渐变效果，具体用法是transition: 属性名 时间 过渡效果，这里的过渡效果可以是ease、linear、ease-in、ease-out等。而transform属性可以实现平移、旋转、缩放等操作，而我们这里需要用到的是平移，即translateX。

接下来，在HTML中添加轮播容器和图片，如下：

<div class="carousel">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div> 

我们需要使用JavaScript代码来实现图片的自动翻页效果，具体代码如下：

var carousel = document.querySelector('.carousel');
var imgs = carousel.querySelectorAll('img');
var i = 0;

setInterval(function() {
  imgs.forEach(function(img) {
    img.classList.remove('active');
  });

  i++;

  if (i >= imgs.length) {
    i = 0;
  }

  imgs[i].classList.add('active');
}, 5000); 

这段代码中，通过querySelector和querySelectorAll方法获取轮播容器和其中的图片元素，然后使用setInterval方法来定时执行图片翻页效果。其中，被赋予.active类名的图片元素会显示在容器中。