在网页交互设计中，按钮、输入框和卡片等元素通常需要在不同用户操作状态下给出视觉反馈。CSS动画与伪类组合是一种纯样式方案，可以在不使用JavaScript的情况下实现hover、active、focus等复杂交互。
基础伪类与动画能力
常见的用户状态伪类包括:hover、:active和:focus。它们分别反映鼠标悬停、元素被激活（如按下）以及获得焦点（如键盘Tab切换）。配合transition可做属性渐变，配合@keyframes可做多阶段动画。
transition实现悬停与按下反馈
下面的例子展示按钮在hover时放大并变色，在active时缩小，形成轻量交互：
.button {
padding: 10px 20px;
background: #3498db;
color: #fff;
border: none;
border-radius: 4px;
transition: transform 0.2s ease, background 0.2s ease;
}
.button:hover {
background: #2980b9;
transform: scale(1.05);
}
.button:active {
transform: scale(0.95);
}
focus态的无障碍处理
对于输入框，使用:focus添加高亮边框与微光动画，可提升键盘用户的可达性：
.input {
border: 1px solid #ccc;
padding: 8px;
transition: box-shadow 0.3s ease;
}
.input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}
组合伪类与keyframes
当交互需要多步骤变化，例如卡片在hover时先浮起再显示隐藏层，可以用@keyframes定义动画，并在伪类中触发：
@keyframes lift {
from { transform: translateY(0); }
to { transform: translateY(-8px); }
}
.card {
transition: box-shadow 0.3s ease;
}
.card:hover {
animation: lift 0.3s forwards;
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.card:hover .detail {
opacity: 1;
}
.detail {
opacity: 0;
transition: opacity 0.3s ease;
}
实践注意事项
- 移动端没有真实hover，可将active作为点击态主要反馈。
- focus样式不要完全移除outline，以保障键盘操作可见性。
- 动画时长控制在200ms到400ms，避免拖沓。
- 伪类组合层级较多时，建议用BEM命名减少样式冲突。
小结
将CSS动画与hover、active、focus等伪类组合，可以用极少代码实现自然流畅的交互。合理运用transition与keyframes，并兼顾无障碍与移动端，就能构建出易维护的复杂界面反馈。