使用 AOS 在鼠标滚动时为 div 设置动画

AOS 是一个小型库，可在您滚动时为页面上的元素设置动画。

AOS 允许您在向下和向上滚动时为元素设置动画。如果您滚动回顶部，元素将动画到它之前的状态，如果您向下滚动，则准备再次动画。

安装：安装AOS非常简单：

• 在网页的head标签中添加以下标签。

• 在关闭 标签之前添加脚本，并初始化 AOS：

就是这样，现在你已经在你的 webapp 中成功安装了 aos。

使用 data-aos设置动画 属性 ：

示例：下面是一个演示动画效果的示例。

HTML

  

    
  
    
    
  
    
        AOS.init();
    
      
    
        body {
            padding: 100vh 0;
        }
  
        div {
            margin: 0 auto;
            color: #fff;
            padding: 100px;
            font-size: 25px;
            width: 50%;
            background-color: green;
        }
    

  

    
        Geeks for geeks
    

  

输出：