How to implement page scrolling animation effects in css3?-CSS Tutorial-php.cn

本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

How to implement page scrolling animation effects in css3?

css3实现页面滚动动画特效具体代码示例如下：

首先要在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>

Copy after login

<body aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
<header class="hero">
    <div class="hero-center">
        <h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
        <h2 class="hero__text aos-init" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
    </div>
   <span class="hero__scroll aos-init" aos="fade-up" aos-easing="ease" aos-delay="800">
      Scroll down <br>
      <i class="chevron bottom"></i>
   </span>
</header>

<section class="section section--code">
    <div class="container">
        <h2 class="section-title">Fade</h2>
        <div class="code code--small code--left aos-init" aos="fade-up">
            <pre class="brush:php;toolbar:false"><code class="html"><div aos="fade-up"></div></code>

Copy after login