[分享]css像卡片左进右出怎么实现

CSS卡片左进右出实现

/*HTML结构*/
<div class="wrapper">
  <div class="card left">
    <img src="image1.jpg">
  </div>
  <div class="card center">
    <img src="image2.jpg">
  </div>
  <div class="card right">
    <img src="image3.jpg">
  </div>
</div>

/*CSS样式*/
.wrapper {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.card {
  position: absolute;
  top: 30px;
  width: 300px;
  height: 340px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: all ease-in-out 0.5s;
}

.left {
  left: 0;
  transform: translateX(-50%);
}

.center {
  left: 50%;
  transform: translateX(-50%) scale(1.05);
  z-index: 1;
}

.right {
  right: 0;
  transform: translateX(50%);
}

.wrapper:hover .left {
  transform: translateX(-100%) scale(0.9);
}

.wrapper:hover .center {
  transform: translateX(-50%) scale(1);
}

.wrapper:hover .right {
  transform: translateX(100%) scale(0.9);
} 

说明：

在HTML结构中，我们使用三个div分别表示三张图片，然后设置三个类名分别为left、center、right，然后在CSS样式中对这三个元素进行设置。

首先，我们设置.wrapper的宽高为600px和400px，然后设置overflow为hidden，表示我们只展示wrapper内的css卡片内容，如果超出wrapper的范围，就不显示。

然后，我们对.card进行设置，我们把左侧卡片设置为绝对定位，然后左侧和右侧的卡片设置定位left:0和right:0分别靠左和靠右，然后是中间的卡片设置left:50%，表示它出现在wrapper中间。我们还需要设置卡片的一些其他样式，如卡片的大小、边框、圆角、盒子阴影等。

接着，我们通过CSS3 transform属性来控制每个卡片的位置和大小。我们初始时设置左侧卡片left:-50%，中间卡片left:50%和右侧卡片right:-50%，这样就可以让左侧卡片向左偏移50%的wrapper宽度，即隐藏。中间卡片在左侧的基础上再向左偏移50%的宽度，并且设置scale(1.05)来放大一些。右侧卡片向右偏移50%的宽度，即隐藏。

最后，我们为wrapper添加鼠标悬停事件（:hover），然后分别对三个卡片设置不同的transform属性值。当鼠标悬停在wrapper上时，左侧卡片translateX(-100%)向左移动100%的宽度，即完全隐藏，中间卡片只需要还原到原始比例即可，而右侧卡片translateX(100%)向右移动100%的宽度，即完全隐藏。

这样，我们就实现了CSS卡片左进右出效果。