CSS Animations

Appearance

聚焦发光 ​

输入框聚焦时边框渐变发光，产生柔和的霓虹光晕效果，提升表单交互的视觉反馈。

实时预览 ​

代码 ​

css
.form-input {
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 15px;
  outline: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.form-input:focus {
  border-color: #667eea;
  box-shadow:
    0 0 0 3px rgba(102,126,234,0.25),
    0 0 20px rgba(102,126,234,0.15);
}
html
<input class="form-input" type="text" placeholder="请输入内容">

纯 CSS 实现的聚焦发光表单动画效果——通过伪类选择器（:focus、:checked）和过渡动画让表单元素具有交互反馈。无需 JS 即可实现聚焦发光、开关切换、浮动标签等效果。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 将 HTML 表单结构粘贴到页面中（注意 checkbox/radio 的 id-label 对应关系）
  3. 调整颜色和尺寸以匹配你的表单设计
  4. 配合 :valid/:invalid 伪类添加表单校验的视觉反馈

使用场景 ​

  • 登录/注册表单：聚焦发光效果让用户知道当前正在输入的字段
  • 设置页面：开关切换和复选框动画让配置操作更直观
  • 搜索框：下划线增长或聚焦扩展动画引导用户输入
  • 错误提示：抖动动画+红色边框给校验失败的字段明确反馈

常见问题 ​

Q: 纯 CSS 表单动画需要 JS 做校验吗？ A: CSS 负责视觉反馈，JS 负责逻辑校验。推荐配合使用：CSS 处理 :valid / :invalid 伪类的样式变化和过渡动画，JS 负责自定义校验规则和提交拦截。

Q: 浮动标签的兼容性如何？ A: :placeholder-shown 伪类 IE 不支持，但所有现代浏览器都支持。IE 降级方案：让标签始终在输入框上方，放弃浮动动画。或使用 :focus-within（同样不支持 IE）。

Q: 开关切换和复选框动画支持键盘操作吗？ A: 用 <label> 包裹的 checkbox/toggle 天然支持键盘操作（Tab 聚焦 + Space 切换）。配合 :focus-visible 伪类添加焦点环样式，满足无障碍要求。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持
Firefox✅ 完全支持
Safari✅ 完全支持
移动端浏览器✅ 完全支持
IE 11⚠️ :focus-within / :placeholder-shown 不支持

使用说明 ​

属性说明
box-shadow (双层)内层光圈 + 外层柔光，营造立体发光
transitionborder-color 与 box-shadow 同时过渡，0.4s 平滑切换
outline: none去除默认轮廓，用自定义 box-shadow 替代
border-color聚焦时从半透明变为品牌色 #667eea

提示： 可通过调整 box-shadow 的模糊半径和颜色来改变光晕范围与色调。搭配 @keyframes 可实现脉冲呼吸灯效果。

📎 相关动画推荐

以下更多 CSS 表单动画 等你探索——每个都支持在线预览和一键复制代码。

开关切换滑动复选框开关动画浮动标签抖动错误复选框动画