本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。
css3实现页面滚动动画特效具体代码示例如下：
首先要在页面中引入aos.css文件,jquery和aos.js文件
<link rel="stylesheet" href="aos.css" /> <script src="jquery.min.js"> </script><script src="aos.js"></script>
<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><code><div aos="fade-down"></div></code>
<code><div aos="fade-right"></div></code>
<code><div aos="fade-left"></div></code>
<code><div aos="fade-up-right"></div></code>
<code><div aos="fade-up-left"></div></code>
<code><div aos="fade-down-right"></div></code>
<code><div aos="fade-down-left"></div></code>
<code><div aos="flip-left"></div></code>
<code><div aos="flip-right"></div></code>
<code><div aos="flip-up"></div></code>
<code><div aos="flip-down"></div></code>
<code><div aos="zoom-in"></div></code>
<code><div aos="zoom-in-up"></div></code>
<code><div aos="zoom-in-down"></div></code>
<code><div aos="zoom-in-left"></div></code>
<code><div aos="zoom-in-right"></div></code>
<code><div aos="zoom-out"></div></code>
<code><div aos="zoom-out-up"></div></code>
<code><div aos="zoom-out-down"></div></code>
<code><div aos="zoom-out-right"></div></code>
<code><div aos="zoom-out-left"></div></code>
<code><div aos="fade-up"
aos-duration="3000">
</div></code><code><div aos="fade-down"
aos-easing="linear"
aos-duration="1500">
</div></code><code><div aos="fade-right"
aos-offset="300"
aos-easing="ease-in-sine">
</div></code><code><div aos="fade-left"
aos-anchor="#example-anchor"
aos-offset="500"
aos-duration="500">
</div></code><code><div aos="fade-zoom-in"
aos-easing="ease-in-back"
aos-delay="300"
aos-offset="0">
</div></code><code><div aos="flip-left"
aos-easing="ease-out-cubic"
aos-duration="2000">
</div></code><code><div aos="fade-up"
aos-anchor-placement="top-bottom">
</div></code><code><div aos="fade-up"
aos-anchor-placement="center-bottom">
</div></code><code><div aos="fade-up"
aos-anchor-placement="bottom-bottom">
</div></code><code><div aos="fade-up"
aos-anchor-placement="top-center">
</div></code><code><div aos="fade-up"
aos-anchor-placement="center-center">
</div></code><code><div aos="fade-up"
aos-anchor-placement="bottom-center">
</div></code>The above is the detailed content of How to implement page scrolling animation effects in css3?. For more information, please follow other related articles on the PHP Chinese website!
Solution to Win7 folder properties not sharing tab page
what is vuex
How to clean the computer's C drive that is too full
Mathematical modeling software
The difference between vscode and vs
How to type the inscription on the coin circle?
How to decrypt bitlocker encryption
How to solve the slow download problem of Baidu Netdisk
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
