卡片悬停上浮特效（上浮+阴影+描边发光 CSS 源码）

效果演示（真实可交互）

下方 4 张卡片分别演示不同的悬停上浮姿态：基础阴影上浮、发光描边上浮、图标弹跳上浮、渐变描边上浮。

完整代码

HTML 结构：四张卡片共用一个 .card 基类，通过追加不同类名切换效果：

<div class="card c-lift">…内容…</div>
<div class="card c-glow">…内容…</div>
<div class="card c-bounce">…内容…</div>
<div class="card c-grad">…内容…</div>

核心 CSS：

.card {
  background: #1c2029;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

/* ① 基础上浮：上移 8px + 阴影加深 */
.c-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
}

/* ② 上浮 + 发光描边 */
.c-glow:hover {
  transform: translateY(-8px);
  border-color: #6c8cff;
  box-shadow: 0 12px 24px rgba(108, 140, 255, .25);
}

/* ③ 上浮 + 图标弹跳 */
.c-bounce:hover { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(0,0,0,.35); }
.c-bounce:hover .c-icon { animation: bounce .5s ease; }
@keyframes bounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-8px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* ④ 渐变描边：双层背景实现 */
.c-grad {
  border: 2px solid transparent;
  background:
    linear-gradient(#1c2029, #1c2029) padding-box,
    linear-gradient(135deg, #6c8cff, #b388ff) border-box;
}
.c-grad:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 14px 28px rgba(108, 140, 255, .28);
}

参数说明

兼容性与性能

• 纯 CSS 实现，兼容所有现代浏览器，无任何依赖库
• 动画仅涉及 transform 与 box-shadow，性能良好，列表页大量使用也不卡顿
• 渐变描边使用了 background 双层技巧，注意背景色的 padding-box 与 border-box 配合
• 建议在卡片较多时给 .card 加 will-change: transform 提示浏览器提前合成

常见问题

Q: 阴影太大显得脏，怎么调？ 把阴影值改小，比如 0 8px 16px，同时把透明度从 .35 降到 .25，悬浮感会更细腻。

Q: 图标弹跳动画能换方向吗？ 可以，改 @keyframes bounce 里的 translateY 与 scale 值即可，比如加一个 rotate 做旋转弹跳。

Q: 渐变描边卡片的背景色改了，边框渐变会失效吗？ 不会，边框渐变来自 border-box 层，与内层背景色相互独立，只改内层颜色即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。