请教实现https://gourmethouse.com/contact中hover时div放大且其他元素偏移的过渡效果

嘿，我来帮你搞定这个交互！这种带有动态反馈的布局能让页面瞬间生动起来，咱们用HTML+CSS就能实现核心效果，不需要复杂的JS，先看具体实现：

1. 基础HTML结构 #

首先咱们需要一个容器包裹所有的卡片元素，结构很简单：

<div class="card-container">
  <div class="card" style="--offset: -2">卡片1</div>
  <div class="card" style="--offset: -1">卡片2</div>
  <div class="card" style="--offset: 1">卡片3</div>
  <div class="card" style="--offset: 2">卡片4</div>
</div>

2. CSS核心样式 #

这部分是关键，咱们用Flex布局来排列卡片，再通过过渡和伪类实现交互：

/* 容器样式：横向排列卡片，留出足够空间让卡片偏移 */
.card-container {
  display: flex;
  justify-content: center;
  gap: 2rem; /* 卡片之间的基础间距 */
  padding: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 卡片基础样式：设置过渡，保证动画平滑 */
.card {
  flex: 1; /* 让卡片平分容器宽度 */
  min-width: 200px;
  height: 300px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease; /* 所有属性变化都加过渡 */
  cursor: pointer;
}

/* 悬停时当前卡片放大，增强立体感 */
.card:hover {
  transform: scale(1.1);
  z-index: 1; /* 放大后覆盖其他卡片，避免被遮挡 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 悬停时其他卡片向外侧偏移，弱化视觉焦点 */
.card-container:hover .card:not(:hover) {
  transform: scale(0.9) translateX(calc(var(--offset) * 1rem));
  opacity: 0.7;
}

3. 关键原理说明 #

• Flex布局：让卡片均匀排列，灵活调整空间分配；
• CSS过渡（transition）：让缩放、偏移等变换都有平滑的动画效果，不会显得生硬；
• 伪类组合（:hover + :not(:hover)）：精准选中容器内未被悬停的卡片，统一设置偏移样式；
• 自定义属性（--offset）：给不同位置的卡片设置不同的偏移方向和幅度，实现“向外侧散开”的效果——负数向左偏移，正数向右偏移，数值大小控制偏移幅度。

4. 可选优化 #

如果想要更细腻的体验，还可以：

• 调整过渡时长（比如把0.3s改成0.4s），让动画更舒缓；
• 给卡片添加悬停时的背景色变化，强化视觉反馈；
• 适配移动端：在小屏幕上取消偏移效果，避免卡片溢出屏幕：

@media (max-width: 768px) {
  .card-container:hover .card:not(:hover) {
    transform: none;
    opacity: 1;
  }
}

这样就完美复刻你想要的交互效果啦，亲测流畅自然，和目标示例的视觉体验一致~

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