CSS悬停效果设计专家

效果预览

• 初始状态：卡片保持圆角与柔和的 2dp 阴影。
• 悬停/键盘聚焦时：卡片以 0.2s 过渡轻轻上移 2px，阴影提升为柔和的 6dp，同时提升层级避免被相邻元素遮挡。
• 移动端：无悬停设备上改用按下（:active）触发，阴影仅提升至 4dp，上移 1px，整体弱化以保证稳定性。

CSS代码

/* Elevation hover card: 2dp -> 6dp (mobile: 4dp) */
:root {
  /* 可按需覆盖 */
  --card-radius: 12px;
  --shadow-2dp: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-4dp: 0 3px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-6dp: 0 8px 24px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.10);
}

.card {
  position: relative; /* 使 z-index 生效 */
  border-radius: var(--card-radius);
  background-color: #fff;

  /* 阴影：先给出兼容回退值，再使用变量值 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  box-shadow: var(--shadow-2dp);

  /* 轻量 GPU 合成，减少重绘抖动 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  z-index: 0;

  /* 0.2s 过渡（含前缀） */
  transition:
    box-shadow 0.2s ease,
    -webkit-transform 0.2s ease,
    transform 0.2s ease;
}

/* 悬停/可聚焦容器内元素时的提升态 */
.card:hover,
.card:focus-within {
  /* 阴影：回退 + 变量 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.10);
  box-shadow: var(--shadow-6dp);

  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);

  z-index: 3; /* 提升层级，避免被相邻卡片投影覆盖 */
  will-change: transform, box-shadow; /* 仅在交互发生时提示浏览器优化 */
}

/* 可选：让媒体内容继承圆角（不影响阴影圆角） */
.card img,
.card .media {
  display: block;
  border-radius: inherit;
}

/* 移动端（无悬停/粗指针）弱化效果，使用 :active 反馈 */
@media (hover: none) and (pointer: coarse) {
  .card {
    transition-duration: 0.18s; /* 触摸反馈略快一些 */
  }
  .card:active {
    /* 阴影：回退 + 变量 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    box-shadow: var(--shadow-4dp);

    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
  }
}

/* 无动画偏好：关闭位移动画，保留状态切换 */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover,
  .card:focus-within,
  .card:active {
    -webkit-transform: none;
    transform: none;
  }
}

实现原理

• box-shadow：使用 2 层柔和阴影模拟 2dp/4dp/6dp 层级，悬停时仅过渡 box-shadow 和 transform，性能较优。
• transform: translateY：用轻微上移（-2px/-1px）模拟“抬起”手感，同时触发合成层，减少抖动。
• will-change：只在悬停/聚焦时声明，避免长时间占用内存。
• z-index + position: relative：交互态提高 z-index，避免卡片被相邻元素投影遮挡；transform 本身会创建堆叠上下文，但明确 z-index 更可控。
• 媒体查询：在无悬停设备上用 :active 弱化反馈，保持移动端稳定；在用户开启“减少动态效果”时取消位移动画，提升可访问性。
• 圆角：设置 border-radius 并让内层媒体继承，实现视觉一致；阴影自然遵循外轮廓。

兼容性说明

• transform、box-shadow、transition：主流浏览器均长期支持（Chrome 36+、Firefox 16+、Safari 7+、Edge 12+）。
• will-change：Chrome/Edge/Firefox/Safari 支持；IE 会忽略，不影响效果。
• CSS 变量：Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+。已提供回退阴影值，即使不支持变量也能正常显示。
• 媒体查询 (hover/pointer)：现代浏览器广泛支持；老旧环境仅不会启用移动端弱化逻辑，但基本悬停仍可用。
• IE 11：忽略 CSS 变量与 will-change，但 transform/transition/box-shadow 正常，整体可降级使用。

使用建议

• HTML 使用方式：给需要交互的卡片容器添加类名 .card；内部内容不限，图片/媒体元素建议继承圆角。
• 容器溢出：避免在卡片父级设置 overflow: hidden；否则投影可能被裁切。如必须裁切，保留父级内边距以留出投影空间。
• 主题定制：可在 :root 或局部容器上覆盖 --card-radius、--shadow-* 以适配不同视觉风格。
• 列表场景：卡片紧邻时建议为悬停卡片增加 z-index（已内置），避免投影被覆盖。
• 性能：避免在同屏大量元素同时处于悬停态；will-change 仅在交互时生效已避免内存占用。

效果预览

• 鼠标悬停或键盘聚焦在导航链接上时，底部出现一条与文本同色的细下划线。
• 下划线在 60ms 延迟后，从书写方向的起点向终点描边展开（LTR：左→右；RTL：右→左），动画时长 0.18s，缓动为 ease-in。
• 移出时快速收回，不额外延迟。
• 保留浏览器默认的键盘可见焦点（outline），无障碍友好。

CSS代码

/* 可调参数 */
:root {
  --nav-underline-h: 2px;                 /* 下划线厚度 */
  --nav-underline-gap: 0.15em;            /* 与文字底部的间距（正值向下） */
  --nav-underline-color: currentColor;    /* 颜色跟随文字色 */
  --nav-underline-dur: 0.18s;             /* 动画时长 */
  --nav-underline-ease: ease-in;          /* 动画缓动 */
  --nav-underline-delay-in: 60ms;         /* 进入延迟 */
  --nav-underline-delay-out: 0ms;         /* 离开延迟（设为0，响应更快） */
}

/* 导航链接基础样式（示例：.nav 为容器类名） */
.nav a {
  position: relative;
  display: inline-block;   /* 确保伪元素定位基准可靠 */
  text-decoration: none;   /* 去除默认下划线 */
  /* 建议：如需为下划线留出空间，可解注下一行 */
  /* padding-bottom: calc(var(--nav-underline-gap) + var(--nav-underline-h)); */
}

/* 下划线伪元素：默认收起 */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0; /* 覆盖整行内容宽度 */
  bottom: calc(-1 * var(--nav-underline-gap));
  height: var(--nav-underline-h);
  background-color: var(--nav-underline-color);

  /* 用 scaleX 实现描边动画（性能优） */
  transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform-origin: left center; /* LTR 下从左向右 */
  transition: transform var(--nav-underline-dur) var(--nav-underline-ease) var(--nav-underline-delay-out);
  -webkit-transition: -webkit-transform var(--nav-underline-dur) var(--nav-underline-ease) var(--nav-underline-delay-out);
  pointer-events: none; /* 避免伪元素拦截事件 */
}

/* RTL 支持：从右向左描边 */
[dir="rtl"] .nav a::after {
  transform-origin: right center;
}

/* 悬停 + 键盘聚焦时展开（包含 :focus 作为对不支持 :focus-visible 的回退） */
.nav a:is(:hover, :focus-visible, :focus)::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transition-delay: var(--nav-underline-delay-in);
  -webkit-transition-delay: var(--nav-underline-delay-in);
}

/* 可见焦点：保留默认轮廓并略微抬升可读性 */
.nav a:focus-visible {
  outline-offset: 2px;
}

/* 降级动效：尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav a::after {
    transition-duration: 0.01ms;
    -webkit-transition-duration: 0.01ms;
    transition-delay: 0ms;
    -webkit-transition-delay: 0ms;
  }
}

实现原理

• 使用伪元素::after作为“可动画的下划线”，避免改变真实布局。
• 通过transform: scaleX(...)与transform-origin控制描边方向：
  • LTR 中 origin 设为 left center，scaleX 从 0 → 1 实现左到右描边。
  • RTL 中通过 [dir="rtl"] 重置为 right center，从右到左描边。
• transition-delay 在悬停/聚焦状态下改为 60ms，使进入动画延后执行；离开时延迟为 0ms，保证快速收回。
• 使用 currentColor 让下划线自动跟随文字颜色，减少维护成本。
• 使用 transform 动画（而非 width/left），能最大化利用合成层，降低重排与重绘，性能更优。

兼容性说明

• transform/transition：Chrome 49+、Firefox 48+、Safari 9+、Edge 16+、iOS Safari 9+。
• :focus-visible：Chrome 86+、Firefox 85+、Safari 15.4+；已提供 :focus 回退以覆盖旧浏览器。
• [dir="rtl"] 选择器广泛支持，可安全用于 RTL 检测。
• 已添加 -webkit- 前缀用于旧版 Safari 的 transform/transition。
• 若需更老旧浏览器支持，可将描边效果退化为非动画的 border-bottom。

使用建议

• 结构建议：给导航容器加 .nav 类，链接使用 a 元素；在需要 RTL 的页面根元素上添加 dir="rtl" 即可自动切换描边方向。
• 间距处理：如下划线与文字太近，增大 --nav-underline-gap；若担心与内容相交，可为链接添加等量 padding-bottom。
• 主题适配：可根据主题切换只修改文字颜色，因下划线使用 currentColor 会自动同步。
• 交互一致性：为避免点击后残留焦点导致持续高亮，可在鼠标点击导航后按需移除焦点状态，但不建议普遍移除，以保证可访问性。
• 性能：尽量避免在大量元素上叠加复杂阴影或渐变；本方案仅使用单个 transform，性能开销低，适合电商/后台的大量导航项使用。