网页滚动动效CSS库合集

做落地页、个人主页或者产品介绍页，如果内容一屏一屏直接堆上去，用户滑两下就划走了。加上滚动动效就不一样，内容随着滚动一点点淡入、上浮，页面马上有了节奏。自己写 JS 监听滚动位置又麻烦又容易出 bug。这份合集收了 3 个网页动效开源库，都是行业里用了很多年的成熟方案，MIT 许可，可以直接商用。

里面都有什么

第一个是 Animate.css，内置 100 多种入场动画，给元素加两个 class 就能动起来，是加动效最省事的方案。第二个是 Hover.css，专做鼠标悬停特效，按钮、卡片、图片能实现放大、位移、描边、发光、翻转这些反馈，交互细节靠它撑。第三个是 AOS，处理滚动到可视区才播放的动画，落地页一段段淡入上浮基本都靠它。三个库都带了完整产物、样式源码和许可证文件。

怎么用

把需要的 css 和 js 文件复制进项目目录，页面头部引入 css，底部引入 js。Animate.css 加上 animate__animated 加效果名这一组 class，Hover.css 给元素挂上对应 class，AOS 在标签上写 data-aos 属性，再初始化一下就行。想改动画时长、延迟和缓动曲线，直接改源码目录里的样式文件后重新编译，也可以用它自带的变量覆盖。

版权说明

三个库都是 MIT 许可，个人和商业项目都能免费使用、修改、再分发，保留版权声明即可。每个库的文件夹里都有完整的 LICENSE 文件，做交付项目时一起留存更稳妥。

资源以 ZIP 压缩包提供，三个库分开存放，解压即用，不需要额外的构建环境。