网页动效CSS库合集200+效果

做落地页、商品详情页、活动页，想让页面有点动感又不想折腾 JS，直接抄现成的 CSS 类名是最省事的办法。这个包里放了三个用得很广的开源动效库，animate.css、hover.css、SpinKit，加起来 200 多种效果，都是 MIT 许可，免费商用。

三个库分别管什么

animate.css 管入场和强调动画，一百多种，淡入、放大、弹跳都有，滚动到那块内容时加个类名就动起来。hover.css 管鼠标悬停，按钮和卡片移上去有抬起、描边、滑动填充等一百多种效果，适合做点击引导。SpinKit 是十二种纯 CSS 加载动画，表单提交、数据加载时那个转圈就是它。

怎么用最快

把对应库的 css 引到页面 head 里，找到想要的类名加到元素上就行。包内附了一个动效演示页，双击打开能直接看到每个效果长什么样，喜欢哪个就抄哪个类名，不用再去翻文档。三个库加起来体积很小，不用担心拖慢页面加载。

几个别踩的坑

动效别贪多，一个页面两三处就够了，满屏都在动反而显得廉价。按钮用悬停效果、首屏用淡入、加载用转圈，是最稳的搭配。如果用户在系统里开了减少动态效果，记得加 prefers-reduced-motion 做降级，动画关掉体验更友好。包内三个库都附了各自的 license，可放心商用。