css怎么做换图片自动变换

关于CSS如何实现图片自动变换，有两种方法。

第一种方法是使用CSS3中的transition属性配合:hover伪类实现图片自动变换。代码如下：

.img-wrap {
      width: 100%;
      height: 300px;
      position: relative;
      overflow: hidden;
}
.img-wrap img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
}
.img-wrap:hover img {
      opacity: 1;
}

上面代码中，我们通过设置img元素的opacity属性，在图片显示和隐藏之间添加1秒的动画效果，从而实现了图片自动变换的效果。

第二种方法是使用CSS3中的animation属性实现图片自动变换。代码如下：

.img-wrap {
      width: 100%;
      height: 300px;
      position: relative;
      overflow: hidden;
}
.img-wrap img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      animation: img-animation 5s infinite;
}
.img-wrap img:first-child {
      opacity: 1;
}
@keyframes img-animation {
  0% {
        opacity: 0;
  }
  20% {
        opacity: 1;
  }
  80% {
        opacity: 1;
  }
  100% {
        opacity: 0;
  }
}
    

上面代码中，我们通过设置img元素的animation属性，在图片显示和隐藏之间添加5秒的动画效果，并重复播放。其中，@keyframes指定了动画的执行过程，通过不同的帧来控制图片的显示和隐藏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！