[分享]css两个图片切换效果吗

CSS是网页设计中不可缺少的一部分，为页面美化和交互提供了许多方便的技巧，其中图片切换效果是常见的交互方式。本文将为大家介绍两种使用CSS实现图片切换的效果。/ 图片简单切换 / .container...

CSS是网页设计中不可缺少的一部分，为页面美化和交互提供了许多方便的技巧，其中图片切换效果是常见的交互方式。本文将为大家介绍两种使用CSS实现图片切换的效果。

/* 图片简单切换 */
.container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}
.container img.active {
  opacity: 1;
}

/* 图片横向淡入淡出 */
.container2 {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.container2 img {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}
.container2 img.active {
  opacity: 1;
  transform: translateX(0);
}
.container2 img.inactive-left {
  transform: translateX(-100%);
  opacity: 0;
}
.container2 img.inactive-right {
  transform: translateX(100%);
  opacity: 0;
} 

以上是两种CSS实现图片切换效果的代码，第一种为图片简单切换，第二种是图片横向淡入淡出。使用时，只需要在HTML中添加相应的结构元素和JS交互即可。

总的来说，CSS是设计师的好朋友，我们可以通过使用它，让页面更美观、更动态。希望本文能给大家带来一点启发，让大家可以更好地利用CSS来实现更多的效果和交互。