AOS CSS介绍

AOS CSS（Animate On Scroll）是一个轻量级的 JavaScript 库，用于在滚动时执行动画效果。这个库的设计旨在使你在网站设计中添加可定制的、流畅的动画效果。

特点

• 轻量级：AOS 的文件大小只有 6KB，因此对于性能要求较高的站点来说非常适用。
• 可定制化：通过使用 AOS，你可以轻松地自定义动画的效果和样式。
• 兼容性：AOS 可以兼容各种浏览器，并支持移动设备。

安装

你可以通过 CDN 引入 AOS：

  <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" />
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

或者，你也可以在本地下载 AOS 文件，然后引入它们：

  <link rel="stylesheet" href="/path/to/aos.css" />
  <script src="/path/to/aos.js"></script>

使用

启用 AOS 的方法非常简单，只需在页面加载后初始化 AOS：

<script>
  AOS.init();
</script>

启用 AOS 之后，你就可以使用各种动画效果了。只需将 data-aos 属性添加到 HTML 标记中，即可展示相应的动画效果：

<div data-aos="fade-up">这里是一个会淡入的块级元素</div>

参数配置

在初始化 AOS 时，你可以添加一些配置项，以自定义动画效果：

<script>
  AOS.init({
    duration: 800, // 动画持续时间
    easing: 'ease-in-out', // 动画缓动效果
    delay: 100, // 动画延迟时间
    offset: 200, // 控制动画元素进入视区前的偏移量
    once: true, // 是否只执行一次
  });
</script>

结束语

AOS 提供了一种简单而有效的方式，在网站设计中添加动画效果。通过使用 AOS，你可以使你的站点更具吸引力，从而提高用户体验。