CSS 悬停效果生成器
选择有限的悬停样式，调整颜色和动态效果，然后复制生成的 HTML 与 CSS。
实时预览
修改控件即可更新预览。
输出包含 :focus-visible 和 prefers-reduced-motion 规则。悬停效果应作为装饰，并保持文字清晰。
使用步骤
如何使用
- 输入简短的元素文字，并选择上浮、下划线、发光或着色。
- 查看本地预览，同时调整悬停颜色、移动距离和过渡时长。
- 复制 HTML 与 CSS，将悬停效果作为装饰并保持内容可读。
有限的本地 CSS 生成
生成器使用四种固定效果之一创建简短的按钮示例。文字限制为 200 个字符，并在写入生成的 HTML 前转义特殊字符。预览和输出均在浏览器中处理，不请求网络、不使用存储或外部依赖。
键盘与动态效果支持
生成规则包含 :focus-visible，为键盘用户提供清晰轮廓。prefers-reduced-motion 规则会移除过渡；请保持文字可读，并将悬停效果用于装饰而非重要状态。
常见问题
你可能还想知道
有哪些效果可用？
生成器支持上浮、下划线、发光和着色。距离与时长控件有范围限制，使输出简短且可预测。
输入文字在生成的 HTML 中安全吗？
生成器将文字限制为 200 个字符，并在写入可复制 HTML 前转义 HTML 特殊字符。
输出支持减少动态效果吗？
支持。生成的 CSS 包含 prefers-reduced-motion: reduce，会移除过渡并保持控件可用且文字清晰。