CSS动画如何实现卡片阴影渐变_box-shadow @keyframes配合hover-css教程-PHP中文网

CSS动画如何实现卡片阴影渐变_box-shadow @keyframes配合hover

P粉602998670

发布： 2025-11-29 18:05:59

原创

791人浏览过

卡片阴影渐变可通过CSS实现，1. 创建HTML卡片容器；2. 设置基础样式与初始box-shadow；3. 可选@keyframes定义脉冲动画；4. 推荐用transition配合:hover实现平滑过渡；5. 进阶可设置多层阴影动态变化，确保格式一致以触发自动插值。

css动画如何实现卡片阴影渐变_box-shadow @keyframes配合hover

卡片阴影渐变效果可以通过 CSS 的 @keyframes 动画与 :hover 伪类结合实现，让鼠标悬停时 box-shadow 平滑过渡，增强交互感。

1. 基础结构：HTML 卡片容器

先创建一个简单的卡片元素：

<div class="card">
  卡片内容
</div>

登录后复制

2. 默认样式设置

为卡片设置基础样式和初始阴影：

.card {
  width: 200px;
  height: 120px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

登录后复制

3. 使用 @keyframes 定义阴影动画（可选）

如果希望阴影变化带节奏感（如脉冲），可用 @keyframes：

立即学习“前端免费学习笔记（深入）”；

@keyframes shadowPulse {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
}

登录后复制

然后在 hover 中调用：

Writer

企业级AI内容创作工具

176

查看详情

.card:hover {
  animation: shadowPulse 0.6s ease-in-out forwards;
}

登录后复制

4. 更自然的做法：transition + hover 直接过渡

大多数场景下，直接使用 transition 更流畅且性能更好：

.card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(-4px);
}

登录后复制

配合上面设置的 transition: all 0.3s ease，阴影会自动渐变。

5. 进阶技巧：多层阴影动态变化

可以定义更丰富的多层阴影，在 hover 时切换：

.card {
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.08),
    0 4px 16px rgba(0,0,0,0.08);
}

.card:hover {
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.12),
    0 12px 48px rgba(0,0,0,0.16);
}

登录后复制

只要两个状态的阴影结构一致（数量、顺序），CSS 就能自动插值实现渐变。

注意：确保 box-shadow 在默认和 hover 状态下的格式兼容，否则动画不会生效。避免从“无”突然到“有”，建议始终保留基础阴影。基本上就这些。用 transition 实现渐变更推荐，@keyframes 适合特殊动效需求。

以上就是CSS动画如何实现卡片阴影渐变_box-shadow @keyframes配合hover的详细内容，更多请关注php中文网其它相关文章！