通过CSS transition与:hover、:focus结合，可实现按钮变色、输入框高亮等平滑视觉反馈；2. :hover触发鼠标悬停效果，transition使背景色在0.3秒内渐变；3. :focus用于输入框获焦时的边框与阴影过渡，提升可访问性；4. 同一元素可同时定义:hover和:focus的统一过渡效果，使用transition控制多个属性并保持动画流畅，避免过度设计影响体验。
在网页设计中，CSS过渡（transition）与伪类结合使用能让用户交互更自然流畅。最常见的场景就是 :hover 和 :focus 配合 transition 实现视觉反馈效果，比如按钮变色、输入框高亮等。
1. :hover 过渡效果实例
当鼠标悬停在元素上时，:hover 伪类被触发。配合 transition 可以让样式变化更柔和。
例如，一个简单的按钮背景色渐变效果：
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
说明：鼠标移入时，背景色在 0.3 秒内平滑变深，ease 缓动函数让动画开始慢、中间快、结束慢，视觉更舒适。
立即学习“前端免费学习笔记（深入）”；
2. :focus 过渡效果实例
:focus 用于表单元素获得焦点时的样式，常用于输入框提示用户当前正在输入。
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
示例：输入框边框颜色过渡
.input-field {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-field:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}
说明：点击输入框时，边框颜色和阴影平滑出现，提升可访问性和用户体验。transition 同时控制多个属性，用逗号分隔即可。
3. 同时使用 :hover 与 :focus 的过渡
某些元素如按钮或链接，可能同时支持 hover 和 focus 状态。可以统一设置过渡，避免重复代码。
.cta-button {
padding: 12px 24px;
background: #28a745;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.cta-button:hover,
.cta-button:focus {
background: #218838;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</font>
注意：:focus 状态对键盘导航很重要，确保可访问性。使用 outline 或自定义聚焦样式，但不要轻易去掉 outline。
基本上就这些。合理使用 transition 与 :hover、:focus 结合，能显著提升界面响应感，关键在于控制过渡时间与属性，避免过度动画影响体验。
