如何实现仿手机后台界面的网页水平悬停交互图片滑块

实现这个效果不需要复杂的动画库，核心靠CSS Flex布局+transform过渡就能完成90%的效果，少量JS只用来做兼容和增强，整体实现成本很低。

核心实现逻辑 #

• 基础布局用Flex实现水平紧凑排布，初始状态卡片小幅收缩，预留放大空间
• 所有状态变化加300ms左右的缓动过渡，保证动画流畅
• 利用CSS伪类选择器实现悬停态的层级、缩放、位移控制，不需要JS实时计算位置
• 文本信息层默认藏在卡片底部，悬停时淡入上移，配合半透明渐变背景保证可读性

分步实现代码 #

1. HTML结构 #

结构非常简单，顶部放页面标题，下方是滑块容器，容器内放多个卡片项，每个卡片包含图片和信息层：

<h1>多任务风格图片滑块</h1>
<div class="card-slider">
  <div class="slider-card">
    <img src="your-image-path-1.jpg" alt="示例图片1">
    <div class="card-info">
      <h3>卡片标题1</h3>
      <p>这是卡片的介绍文本内容，悬停时才会显示。</p>
    </div>
  </div>
  <div class="slider-card">
    <img src="your-image-path-2.jpg" alt="示例图片2">
    <div class="card-info">
      <h3>卡片标题2</h3>
      <p>这是卡片的介绍文本内容，悬停时才会显示。</p>
    </div>
  </div>
  <!-- 按相同结构追加更多卡片即可 -->
</div>

2. 基础布局样式 #

先实现默认状态下的紧凑水平排布，隐藏信息层：

/* 基础重置，清除默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding: 32px 16px;
  min-height: 100vh;
  background: #f0f2f5;
}
h1 {
  text-align: center;
  margin-bottom: 48px;
  font-size: 28px;
}
.card-slider {
  display: flex;
  gap: 12px; /* 控制卡片紧凑度，数值越小挨得越近 */
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  padding: 32px 16px;
  /* 移动端滑动吸附配置，可选 */
  scroll-snap-type: x mandatory;
}
.slider-card {
  position: relative;
  width: 200px;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transform: scale(0.9); /* 初始小幅收缩 */
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  scroll-snap-align: center;
}
.slider-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.3s ease;
}
.card-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
}
.card-info p {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

3. 悬停交互样式 #

这部分是效果核心，纯CSS就能实现悬停放大、推开其他卡片、显示文本的效果：

/* 当前悬停卡片的放大效果 */
.slider-card:hover {
  transform: scale(1.15);
  z-index: 10; /* 提高层级保证放大后压在其他卡片上方 */
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
/* 悬停时显示卡片信息 */
.slider-card:hover .card-info {
  opacity: 1;
  transform: translateY(0);
}
/* 容器被悬停时，所有未选中的卡片收缩，制造被挤开的视觉效果 */
.card-slider:hover .slider-card:not(:hover) {
  transform: scale(0.82);
}
/* 给悬停卡片相邻的卡片加小幅位移，强化推开的真实感（依赖:has()选择器，现代浏览器全支持） */
.slider-card:hover + .slider-card,
.slider-card:has(+ .slider-card:hover) {
  transform: scale(0.86) translateX(8px);
}

兼容与增强方案 #

• 如果需要兼容不支持:has()选择器的旧浏览器（比如IE、2022年之前的Chrome版本），可以加10行以内的JS替代：监听卡片的mouseenter事件，给当前卡片加active类，给前后相邻卡片加near类，其余卡片加far类，把上面CSS里的:has()相关选择器换成对应类名即可。
• 如果需要支持鼠标拖拽滑动，可以监听mousedown/mousemove/mouseup事件，动态修改滑块容器的scrollLeft值，实现和手机端滑动一致的交互。
• 所有尺寸、缩放比例、圆角、动画时长参数都可以根据设计需求调整，比如把卡片宽度改大、缩放比例调高，就能更贴近参考图的效果。

内容的提问来源于stack exchange，提问作者Keenonthedaywalker