CSS: 过渡与滤镜
1. 过渡（Transition）
过渡让元素的属性变化不再是"瞬间跳变"，而是在一定时间内平滑过渡，形成动画效果。
(1) transition 属性
CSS
.box {
width: 100px;
height: 100px;
background: blue;
transition: all 0.3s ease; /* 所有属性变化，0.3秒过渡 */
}
.box:hover {
background: red;
transform: scale(1.2);
}
当鼠标悬停时，盒子不是瞬间变成红色和放大，而是在 0.3 秒内平滑变化。
(2) transition 的四个子属性
transition-property： 指定哪些属性参与过渡
CSS
.box {
transition-property: background; /* 只有背景色有过渡 */
transition-property: all; /* 所有可过渡属性 */
}
transition-duration： 过渡持续时间
CSS
.box {
transition-duration: 0.5s; /* 500毫秒 */
transition-duration: 300ms; /* 300毫秒 */
}
transition-timing-function： 速度曲线
CSS
.box {
transition-timing-function: ease; /* 默认，慢→快→慢 */
transition-timing-function: linear; /* 匀速 */
transition-timing-function: ease-in; /* 慢→快 */
transition-timing-function: ease-out; /* 快→慢 */
transition-timing-function: ease-in-out; /* 慢→快→慢（更明显） */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* 自定义 */
}
transition-delay： 延迟时间
CSS
.box {
transition-delay: 0.2s; /* 鼠标悬停后0.2秒才开始过渡 */
}
(3) transition 简写
CSS
.box {
transition: all 0.3s ease 0.1s;
/* property duration timing-function delay */
}
(4) 多个属性不同设置
CSS
.box {
transition: background 0.3s ease,
transform 0.5s ease-out,
opacity 0.2s linear;
}
(5) 可过渡的属性
并非所有属性都能过渡。常见的可过渡属性包括：
- 颜色类：
color、background-color、border-color - 尺寸类：
width、height、padding、margin、font-size - 变换类：
transform - 视觉类：
opacity、border-radius、box-shadow - 布局类：
flex、grid相关属性（部分）
(6) 触发过渡的方式
过渡需要属性的值发生变化才会触发，常见的触发方式：
- 伪类：
:hover、:focus、:active、:checked - JavaScript：动态添加/删除类或修改样式
- 媒体查询变化：改变窗口大小时属性变化
2. 滤镜（Filter）
CSS 滤镜可以在不修改原始资源的情况下，改变元素的视觉效果。
(1) 基本语法
CSS
.element {
filter: blur(5px);
/* 多个滤镜用空格分隔 */
filter: brightness(1.5) contrast(1.2);
}
(2) 常用滤镜函数
blur()： 模糊
CSS
img {
filter: blur(2px); /* 2像素模糊 */
}
brightness()： 亮度
CSS
img {
filter: brightness(1.5); /* 变亮50% */
filter: brightness(0.5); /* 变暗50% */
}
contrast()： 对比度
CSS
img {
filter: contrast(1.5); /* 增加对比度 */
}
saturate()： 饱和度
CSS
img {
filter: saturate(2); /* 饱和度翻倍 */
}
grayscale()： 灰度
CSS
img {
filter: grayscale(100%); /* 完全黑白 */
filter: grayscale(50%); /* 部分灰度 */
}
sepia()： 复古色调
CSS
img {
filter: sepia(100%); /* 复古效果 */
}
invert()： 反转颜色
CSS
img {
filter: invert(100%); /* 负片效果 */
}
hue-rotate()： 色相旋转
CSS
img {
filter: hue-rotate(90deg); /* 色相旋转90度 */
}
drop-shadow()： 投影阴影
CSS
img {
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
/* 与 box-shadow 不同，drop-shadow 会跟随图像的非矩形轮廓 */
}
(3) 滤镜与过渡结合
CSS
img {
filter: grayscale(100%);
transition: filter 0.5s ease;
}
img:hover {
filter: grayscale(0%); /* 悬停时从黑白变为彩色 */
}
▶ 示例
一个带过渡和滤镜的按钮:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
padding: 10px 20px;
background: navy;
color: white;
border: none;
transition: all 0.3s ease;
filter: brightness(100%);
}
.btn:hover {
background: orange;
transform: scale(1.1);
filter: brightness(120%) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
</style>
</head>
<body>
<button class="btn">悬停我</button>
</body>
</html>
鼠标悬停时，按钮平滑过渡到橙色 + 放大 10% + 变亮 + 投影。整个动画在 0.3 秒内完成。
❓ 常见问题
Q transition 和 animation 有什么区别？
A transition 需要触发条件（如 hover）才能执行，是从 A 状态到 B 状态的过渡，不能循环。animation 不需要触发，可以自动运行，支持多关键帧、循环、反向播放等更复杂的功能。简单说：transition 适合单次交互反馈，animation 适合独立动画。
Q filter: drop-shadow() 和 box-shadow 有什么不同？
A box-shadow 是给元素的盒子边缘加阴影，不关心内容形状。drop-shadow() 会跟随元素的实际轮廓——比如给一个透明 PNG 图片加阴影，box-shadow 会阴影出矩形框，drop-shadow() 会沿着图片中物体的边缘投射。两者用在不同场景。
Q 为什么有时候 transition 不起作用？
A 常见原因有三个：1）属性本身不支持过渡（如 display、float）；2）初始值或结束值没写全，浏览器不知道从哪里变到哪里；3）元素默认 display: none，从无到有时过渡不生效，可以用 animation 代替，或者用 visibility + opacity 配合。
📖 小节
过渡是 CSS 动画最简单的方式——指定哪些属性变化时要平滑过渡、过渡多久、用什么节奏。滤镜则提供了强大的图像处理能力，可以轻松实现模糊、灰度、色彩调整等效果。两者结合（比如鼠标悬停时渐进应用滤镜效果）能创造出非常丰富的交互反馈。
📝 作业
- 创建一个按钮，鼠标悬停时背景色在 0.3 秒内渐变变化，同时按钮略微放大。
- 创建一个图片画廊，默认图片显示为灰度，鼠标悬停时平滑变为彩色。
- 制作一个"导航下划线动画"——鼠标悬停在导航项上时，底部横线从中间向两侧展开（使用 transition）。
- 使用滤镜 + 过渡，实现鼠标悬停时图片变亮且略有模糊的效果。
