当前位置：首页 > 文章列表 > 文章 > 前端 > CSS阴影过渡技巧详解

CSS阴影过渡技巧详解

2025-12-25 14:17:30 0浏览收藏

1. 基础语法：添加 transition 支持

要让 box-shadow 发生变化时有过渡效果，必须给元素设置 transition 属性。通常可以指定为：

transition: box-shadow 0.3s ease;

这表示 box-shadow 的变化将在 0.3 秒内以缓动方式完成。例如：

.button {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

鼠标悬停时，阴影会从浅小变为深大，产生立体浮起感。

2. 预设初始阴影避免闪烁

如果默认状态未定义 box-shadow（即为 none），在 hover 时突然出现阴影，可能导致动画不连贯甚至闪烁。解决方法是：

始终为元素设置一个默认的 box-shadow，即使很轻微
使用透明或极低透明度的阴影作为起点

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0); /* 起点透明 */
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

这样浏览器能正确计算过渡路径，动画更顺滑。

3. 多重阴影的过渡技巧

box-shadow 支持多个阴影叠加，过渡时需确保数量和顺序一致。错误的写法会导致跳变：

/* ❌ 错误：hover 才添加第二层阴影 */
.box:hover {
box-shadow: 0 5px 10px red, 0 0 15px blue;
}

应统一在默认状态就写出所有层级，仅调整参数：

.box {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.3s;
}

.box:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.1);
}

通过控制模糊半径和透明度实现渐进增强。