CSS 动画特效工具箱 | 150+ 种纯 CSS 动画特效，即时预览、一键复制

🎨 CSS 动画特效工具箱

150+ 种 CSS-only 动画特效，即时预览・一键复制・涵盖按钮／进场／Loading／文字／卡片／背景／导航／表单

🔍

😕

这些 CSS 动画特效可以直接复制使用吗？

可以，每个特效点击「查看代码」即可看到完整的 HTML + CSS 代码，点击复制按钮即可复制到剪贴板，粘贴到项目中即可使用，无需额外安装插件。

这些特效需要 JavaScript 才能运作吗？

不需要，所有特效均为纯 CSS 实现，仅使用 transition、transform、animation、keyframes 等 CSS 属性，不依赖任何 JavaScript 代码。

工具箱收录了哪些分类的特效？

共 8 大分类：按钮／链接悬停、进场／淡入动画、Loading 载入动画、文字特效、卡片／图卡悬停、背景／装饰动画、导航／菜单特效、表单／输入特效，总计超过 150 种特效。

可以搜索特定的动画特效吗？

可以，页面上方搜索栏可依名称或说明关键字即时过滤，也可以搭配上方分类标签缩小范围，快速找到需要的特效。

这些特效支持所有浏览器吗？

绝大多数特效使用标准 CSS3 属性，现代浏览器（Chrome、Firefox、Edge、Safari）皆支持；少数使用 backdrop-filter 或 mix-blend-mode 的特效在极旧版浏览器可能效果略有差异。

使用这个工具需要付费或注册吗？

完全免费，不需注册或登录账号，打开页面即可浏览、搜索、复制所有特效代码。