css-hover-effects

CSS 悬停效果

零依赖、SSR 安全的悬停效果模式，适用于任何网页。 自动让效果与现有设计风格相匹配。

---

步骤 1 — 检测设计风格

选择效果之前，先阅读现有 CSS 并对设计进行分类。 按以下顺序检查这些信号：

信号检查清单

border-radius
  0–3px      → SHARP (corporate, enterprise)
  4–8px      → STANDARD (SaaS, neutral)
  12px+      → ROUNDED (consumer, friendly)

color saturation (look at primary/accent colors)
  muted, low-saturation (HSL s < 40%)  → MINIMAL
  moderate (40–70%)                    → STANDARD
  vivid, high-saturation (> 70%)       → BOLD

existing transitions
  none                → conservative, start subtle
  transition: all     → open to most effects
  specific property   → match their approach

spacing & density
  large padding/gaps  → marketing / hero page → bolder effects OK
  tight layout        → dashboard / app → subtle only

shadow usage
  no box-shadow       → FLAT design → avoid float-shadow
  has box-shadow      → ELEVATED → float-shadow fits
  
font style
  serif               → editorial / formal → no bouncy effects
  display / heavy     → bold brand → strong effects OK
  system-ui / sans    → neutral → match by other signals

风格分类

检查完信号后，选择一个类别：

风格	信号	示例
MINIMAL	低饱和色彩 + 大圆角 + 无阴影 + 系统字体	Notion、Linear、Vercel
BOLD	鲜艳色彩 + 任意圆角 + 强阴影 + 展示字体	Stripe、创意机构
PLAYFUL	鲜艳色彩 + 大圆角 + 活泼字体 + 多彩调色板	Duolingo、消费类应用
CORPORATE	低饱和／藏青色彩 + 小圆角 + 紧凑密度 + 无装饰	B2B SaaS、仪表板
DARK-PREMIUM	深色背景 + 发光点缀 + 中等圆角	Raycast、Linear 深色主题、开发工具

---

步骤 2 — 从矩阵中挑选效果

效果 × 风格兼容性矩阵

效果	MINIMAL	BOLD	PLAYFUL	CORPORATE	DARK-PREMIUM
Float	✅	✅	✅	✅	✅
Float Shadow	❌（扁平）	✅	✅	❌	✅
Glow	❌	✅	✅	❌	✅ ★ 最佳
Underline From Center	✅ ★ 最佳	✅	✅	✅	✅
Sweep To Right	❌（过于夸张）	✅	✅	❌	❌
Grow	✅	✅	✅	✅	✅
Pulse Grow	❌	✅	✅	❌	❌
Pop	❌	✅	✅ ★ 最佳	❌	❌
Wobble	❌	✅	✅	❌	❌
Buzz	❌	✅	✅	❌	❌
Background Fade	✅ ★ 最佳	✅	✅	✅ ★ 最佳	✅
Shutter In	❌	✅ ★ 最佳	✅	❌	✅
Border Fade	✅	✅	✅	✅	✅
Ripple Out	❌	✅	✅	❌	✅
Shadow Radial	❌	✅	❌	❌	✅ ★ 最佳
Curl	❌	✅	✅	❌	❌
Bubble（工具提示）	✅	✅	✅	✅	✅

规则：

• MINIMAL：每页最多使用 2 种效果，保持 duration ≤ 250ms
• CORPORATE：只使用 Background Fade、Underline、Border、微妙的 Float——不使用其他效果
• DARK-PREMIUM：优先选择 Glow 和 Shadow Radial，而非移动效果
• PLAYFUL：组合 2 种效果（例如 Pop + 背景颜色变化）
• 页面上出现超过 3 次的元素，绝不使用 Wobble／Buzz

---

步骤 3 — 效果库（可直接复制的 CSS）

使用 CSS 自定义属性来匹配现有调色板。 将 var(--accent) 替换为项目实际使用的强调色。

---

类别：2D 过渡

Float

使元素向上浮起。通用，适用于所有风格。

.hvr-float {
  --duration: 0.3s;
  transition: transform var(--duration) ease;
}
.hvr-float:hover {
  transform: translateY(-6px);
}

对于 MINIMAL：使用 translateY(-4px)。对于 BOLD／PLAYFUL：使用 translateY(-8px)。

---

Float Shadow

浮起 + 匹配的阴影。仅在设计已有阴影时使用。

.hvr-float-shadow {
  --duration: 0.3s;
  --shadow-color: rgba(0, 0, 0, 0.12);
  transition: transform var(--duration) ease,
              box-shadow var(--duration) ease;
}
.hvr-float-shadow:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px var(--shadow-color);
}

提示：将 --shadow-color 设为强调色的有色变体，营造更丰富的效果。

---

Grow

轻微放大。适用于任何元素，适合卡片和图像。

.hvr-grow {
  transition: transform 0.2s ease;
}
.hvr-grow:hover {
  transform: scale(1.05);
}

---

Shrink

缩小——传达“可按压”的含义。适合图标按钮。

.hvr-shrink {
  transition: transform 0.2s ease;
}
.hvr-shrink:hover {
  transform: scale(0.94);
}

---

Pop

弹簧般缩放并带有弹性过冲。仅适用于 PLAYFUL 和 BOLD。

.hvr-pop {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hvr-pop:hover {
  transform: scale(1.15);
}

---

Pulse Grow

脉冲放大动画。吸引用户注意单个 CTA。 谨慎使用——每页最多一个元素。

.hvr-pulse-grow {
  animation: hvr-pulse-grow 0.4s linear infinite alternate;
}
@keyframes hvr-pulse-grow {
  to { transform: scale(1.06); }
}

---

Wobble Horizontal

活泼的左右摇晃效果。仅用于标签、徽章和有趣的 UI。

.hvr-wobble-horizontal:hover {
  animation: hvr-wobble-h 0.8s ease both;
}
@keyframes hvr-wobble-h {
  16.65% { transform: translateX(6px); }
  33.3%  { transform: translateX(-5px); }
  49.95% { transform: translateX(4px); }
  66.6%  { transform: translateX(-2px); }
  83.25% { transform: translateX(1px); }
  100%   { transform: translateX(0); }
}

---

Buzz

快速振动效果。仅用于警报、错误状态和通知图标。

.hvr-buzz:hover {
  animation: hvr-buzz 0.15s linear infinite;
}
@keyframes hvr-buzz {
  50% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

---

Bob

轻柔的上下浮动动画。持续播放，不由悬停触发。 用于装饰性主视觉元素和 Logo 标记。

.hvr-bob {
  animation: hvr-bob 1.5s ease infinite;
}
@keyframes hvr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

---

类别：背景过渡

Background Fade

悬停时出现色彩渐变。最安全的背景效果——适用于各种场景。

.hvr-bg-fade {
  --bg-hover: rgba(99, 102, 241, 0.08); /* use accent at 8% opacity */
  transition: background-color 0.25s ease;
}
.hvr-bg-fade:hover {
  background-color: var(--bg-hover);
}

CORPORATE 的默认效果。适用于表格行、菜单项和列表项。

---

Sweep To Right

纯色从左侧扫入。效果醒目——仅适用于 BOLD 和 PLAYFUL。

.hvr-sweep-right {
  --sweep-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-sweep-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sweep-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.hvr-sweep-right:hover::before { transform: scaleX(1); }
.hvr-sweep-right:hover { color: white; }

---

Shutter In Horizontal

分开的遮板从中心打开。适用于视觉冲击力强的 CTA 按钮。

.hvr-shutter-in-h {
  --shutter-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.35s ease;
}
.hvr-shutter-in-h::before,
.hvr-shutter-in-h::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--shutter-color);
  transition: transform 0.35s ease;
  z-index: -1;
}
.hvr-shutter-in-h::before { left: 0; transform: scaleX(0); transform-origin: left; }
.hvr-shutter-in-h::after  { right: 0; transform: scaleX(0); transform-origin: right; }
.hvr-shutter-in-h:hover::before,
.hvr-shutter-in-h:hover::after { transform: scaleX(1); }
.hvr-shutter-in-h:hover { color: white; }

---

Radial Out

圆形波纹从中心扩散。适用于图像缩略图和头像。

.hvr-radial-out {
  --radial-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-radial-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--radial-color);
  transform: scale(0);
  transition: transform 0.4s ease;
  z-index: -1;
}
.hvr-radial-out:hover::before { transform: scale(2.5); border-radius: 0; }
.hvr-radial-out:hover { color: white; }

---

类别：边框过渡效果

从中心向外的下划线

文本下方的线条从中心向外延伸。适用于通用导航链接。

.hvr-underline-center {
  --line-color: var(--accent, #6366f1);
  --line-height: 2px;
  position: relative;
}
.hvr-underline-center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: var(--line-height);
  background: var(--line-color);
  transition: left 0.25s ease, right 0.25s ease;
}
.hvr-underline-center:hover::after { left: 0; right: 0; }

---

从左侧延伸的下划线

线条从左侧滑入。方向感比中心版本更强。

.hvr-underline-left {
  --line-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-underline-left::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: var(--line-color);
  transition: right 0.25s ease;
}
.hvr-underline-left:hover::after { right: 0; }

---

边框淡入

悬停时显示细边框。适用于卡片、面板和图片容器。

.hvr-border-fade {
  --border-color: var(--accent, #6366f1);
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}
.hvr-border-fade:hover {
  border-color: var(--border-color);
}

---

涟漪扩散

边框涟漪向外扩散。适用于圆形按钮和图标按钮。

.hvr-ripple-out {
  --ripple-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-ripple-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ripple-color);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hvr-ripple-out:hover::before {
  transform: scale(1.12);
  opacity: 1;
}

---

揭示（下划线揭示）

文字逐渐显露，仿佛揭开下方的彩色条。适用于强调链接。

.hvr-reveal {
  --reveal-color: var(--accent, #6366f1);
  position: relative;
  overflow: hidden;
}
.hvr-reveal::after {
  content: '';
  position: absolute;
  bottom: 0; left: -100%;
  width: 100%; height: 2px;
  background: var(--reveal-color);
  transition: left 0.3s ease;
}
.hvr-reveal:hover::after { left: 0; }

---

类别：阴影与发光效果

发光

悬停时呈现彩色光晕。是 DARK-PREMIUM 风格的标志性效果。

.hvr-glow {
  --glow-color: rgba(99, 102, 241, 0.5); /* use accent at 50% opacity */
  transition: box-shadow 0.3s ease;
}
.hvr-glow:hover {
  box-shadow: 0 0 18px var(--glow-color);
}

用于深色背景：将不透明度提高至 0.7。用于浅色背景：将不透明度设为 0.3。

---

阴影

悬停时呈现方向性阴影。适用于白色背景上的卡片。

.hvr-shadow {
  transition: box-shadow 0.3s ease;
}
.hvr-shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

---

径向阴影

向内扩散的径向阴影——营造戏剧性的聚焦效果。仅适用于 DARK-PREMIUM。

.hvr-shadow-radial {
  --glow: rgba(99, 102, 241, 0.35);
  transition: box-shadow 0.4s ease;
}
.hvr-shadow-radial:hover {
  box-shadow: 0 0 0 4px var(--glow), 0 0 40px var(--glow);
}

---

类别：图标（带文字）

当按钮或导航项同时包含文字和图标时使用。

图标向前滑动

悬停时图标向右滑动。适用于带有 → 箭头的导航项。

.hvr-icon-forward .icon {
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.hvr-icon-forward:hover .icon {
  transform: translateX(4px);
}

---

图标浮动

图标向上浮动。适用于工具栏和侧边栏中的图标按钮。

.hvr-icon-float .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-float:hover .icon {
  transform: translateY(-4px);
}

---

图标旋转

悬停时图标旋转。适用于刷新、设置和加载图标。

.hvr-icon-spin .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-spin:hover .icon {
  transform: rotate(90deg);
}

---

图标放大

图标缩放放大，文字保持静止。

.hvr-icon-grow .icon {
  transition: transform 0.2s ease;
}
.hvr-icon-grow:hover .icon {
  transform: scale(1.3);
}

---

类别：气泡（工具提示）

需要通过悬停触发工具提示样式的提示框时使用。

上方气泡

悬停时，工具提示显示在元素上方。

.hvr-bubble-top {
  position: relative;
}
.hvr-bubble-top::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1a1a2e;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top:hover::before,
.hvr-bubble-top:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

用法：<button class="hvr-bubble-top" data-tooltip="Click to save">Save</button>

---

类别：卷角效果

右下角卷页

在右下角呈现卷页效果。适用于创意类／作品集网站。

.hvr-curl-bottom-right {
  position: relative;
  overflow: hidden;
}
.hvr-curl-bottom-right::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  background: linear-gradient(
    225deg,
    #fff 45%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 56%, transparent 80%
  );
  transition: width 0.3s ease, height 0.3s ease;
  box-shadow: -1px -1px 4px rgba(0,0,0,0.1);
}
.hvr-curl-bottom-right:hover::before {
  width: 40px;
  height: 40px;
}

---

第 4 步 — 组合规则

安全组合（可用于同一元素）

• 浮动 + 边框淡入
• 浮动阴影 + 放大（仅轻微放大，最大为 1.03）
• 从中心向外的下划线 + :hover 时的颜色过渡
• 背景淡入 + 图标向前滑动
• 发光 + 径向阴影（仅适用于 DARK-PREMIUM）

切勿组合

• 扫掠 + 浮动（会相互争夺注意力）
• 摇摆 + 嗡鸣（过于混乱）
• 脉冲放大 + 任何其他动画（有引发癫痫发作的风险）
• 卷角 + 背景过渡（视觉冲突）

持续时间指南

MINIMAL style:     150–200ms  ease
CORPORATE style:   200–250ms  ease
STANDARD style:    200–300ms  ease
BOLD style:        250–350ms  ease
PLAYFUL style:     200–350ms  cubic-bezier(0.34, 1.56, 0.64, 1)

无障碍

始终遵循 prefers-reduced-motion：

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

应用悬停效果时，在全局样式表中添加此代码块一次。

---

第 5 步 — 应用检查清单

输出代码前，请确认：

• 已识别设计风格并说明选择理由
• 选择效果前已检查兼容性矩阵
• 使用了与现有调色板关联的 CSS 自定义属性
• 已应用 prefers-reduced-motion 代码块
• 每个元素最多使用 1 种动画效果（不叠加）
• 每页使用「脉冲放大」的元素不超过 1 个
• 每页使用「摇摆／嗡鸣」的元素不超过 3 个
• 所有 position: relative + overflow: hidden 前置条件均已设置

---

快速参考 — 按元素类型选择效果

元素	极简	大胆	活泼	企业风格	DARK-PREMIUM
导航链接	中心下划线	向右扫掠	弹出 + 变色	背景淡入	下划线 + 发光
主按钮	放大 + 边框淡入	百叶窗进入	弹出	背景淡入	发光
次要按钮	边框淡入	向右扫掠	摇摆	边框淡入	边框 + 发光
卡片	浮动	浮动阴影	弹出 + 阴影	背景淡入	发光
图标按钮	图标浮动	图标旋转	图标放大	图标向前滑动	图标浮动 + 发光
标签／徽章	放大	弹出	弹出 + 变色	背景淡入	放大
图片	放大	浮动阴影	浮动	放大	发光
表格行	背景淡入	背景淡入	背景淡入	背景淡入	背景淡入
工具提示触发元素	上方气泡	上方气泡	上方气泡	上方气泡	上方气泡