基于CSS和JS实现卡片悬停慢弹跳效果（WebFlow适配求助）

核心逻辑 #

Pipe的卡片弹跳效果是悬停时快速上移+轻微回弹，用CSS的transform结合自定义贝塞尔曲线就能实现，比JS更流畅，也适配WebFlow的可视化编辑逻辑。

步骤1：基础样式配置 #

在WebFlow的「项目设置」→「自定义代码」→「头部代码」里添加以下CSS（替换.card为你实际的卡片类名）：

.card {
  position: relative;
  /* 核心过渡：用贝塞尔曲线实现弹性效果 */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(0); /* 初始状态无偏移 */
  /* 可选：加阴影增强层次感，随弹跳同步变化 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

步骤2：悬停状态设置 #

在同一CSS块里添加悬停样式：

.card:hover {
  transform: translateY(-12px); /* 上移距离，可按需调整 */
  box-shadow: 0 12px 20px rgba(0,0,0,0.15); /* 悬停时放大阴影 */
}

如果想要更夸张的弹跳感，把悬停的过渡曲线换成更陡的：

.card:hover {
  transform: translateY(-15px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

步骤3：WebFlow专属适配 #

• 确保你的卡片元素已经设置了自定义类名（不要用WebFlow默认类），类名要和CSS里的.card对应。
• 如果是单个卡片，也可以直接在元素的「自定义代码」→「内部样式」里写CSS，不用全局添加。

JS补充方案（适合复杂交互） #

如果你的JS代码没起作用，试试这个简化版（放在「项目设置」→「自定义代码」→「页脚代码」）：

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'translateY(-12px)';
    card.style.transition = 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'translateY(0)';
    card.style.transition = 'transform 0.3s ease-out';
  });
});

常见问题排查 #

• 效果不生效：检查卡片父元素是否有overflow: hidden限制，或者WebFlow默认样式覆盖了你的自定义CSS（可以用浏览器调试工具查看元素样式优先级）。
• 弹跳不自然：调整贝塞尔曲线参数，比如cubic-bezier(0.25, 0.46, 0.45, 0.94)是柔和弹性，cubic-bezier(0.34, 1.56, 0.64, 1)是夸张弹跳。
• 移动端禁用：如果不想在手机上显示效果，加媒体查询：

@media (max-width: 768px) {
  .card:hover {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
}

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