5 分钟内用 CSS 实现丝滑的卡片移出效果

2023-11-25 07:04:06

在网页设计中，卡片陈列效果很常见，类似于某某管理中心，一个个卡片平铺在一个页面上。假如产品经理提出一个紧急需求，要求在卡片上增加一个丝滑的移出效果，该怎么做呢？

原理

丝滑的卡片移出效果本质上是一个动画。当用户将鼠标悬停在卡片上时，卡片会向一侧移动，露出下面的卡片。当用户将鼠标移开时，卡片会恢复原位。

实现过程

准备 HTML 结构

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Image">
    <div class="card-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <img src="image.jpg" alt="Image">
    <div class="card-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

添加 CSS 样式

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateX(100px);
}