Appearance
发光过渡
发光+缩放
实时预览
代码
css
.glow-trans{width:160px;height:120px;background:#1a1a2e;border:2px solid #667eea;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#667eea;font-weight:700;font-size:14px;cursor:pointer;transition:all .3s}
.glow-trans:hover{box-shadow:0 0 30px #667eea66;border-color:#a78bfa;transform:scale(1.05)}纯 CSS 实现的发光过渡过渡动画效果——通过 transition 属性在两个状态之间平滑切换。适用于页面元素显示/隐藏、弹窗、Tab 切换等场景。
快速使用
- 复制 CSS 代码到你的样式文件中
- 给目标元素添加初始状态样式（
opacity: 0; transform: ...等） - 通过 JavaScript 添加/移除类名触发过渡动画
- 调整
transition-duration和transition-timing-function控制动画效果
使用场景
- 页面路由切换：淡入/滑动过渡让页面跳转更流畅
- 弹窗/对话框：缩放弹出+遮罩淡入营造前后层级关系
- 内容展开/折叠：过渡动画让内容区域的显示隐藏更自然
- Tab 切换：裁剪揭示或滑动效果让标签页切换有方向感
常见问题
Q: transition 和 animation 应该用哪个？ A: 简单规则：两个状态之间的过渡用 transition（hover、类切换）；复杂的多阶段动画用 animation（loading、背景动画、循环动画）。transition 代码更少、性能更好。
Q: 为什么我的 transition 没有动画效果？ A: 常见原因：1) 起始状态没有设置目标属性值；2) 属性值类型不匹配（如 auto 到具体值不会过渡）；3) display: none 到 display: block 不会过渡。用 opacity + visibility 代替 display 变化。
Q: 如何让过渡看起来更自然？ A: 使用 cubic-bezier() 自定义缓动曲线。进入动画用 ease-out（快→慢），离开动画用 ease-in（慢→快）。Material Design 推荐的缓动值：cubic-bezier(0.4, 0.0, 0.2, 1)。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持 |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ⚠️ 基础 transition 可用，部分属性过渡不支持 |