php页面滑动效果,css3怎么实现页面滚动动画特效？

本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和

WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

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

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

页面滚动元素动画插件-aos.js

Animate On Scroll Library

Scroll down

Fade

<div aos="fade-up"></div>

<div aos="fade-down"></div>

<div aos="fade-right"></div>

<div aos="fade-left"></div>

<div aos="fade-up-right"></div>

<div aos="fade-up-left"></div>

<div aos="fade-down-right"></div>

<div aos="fade-down-left"></div>

Flip

<div aos="flip-left"></div>

<div aos="flip-right"></div>

<div aos="flip-up"></div>

<div aos="flip-down"></div>

Zoom

<div aos="zoom-in"></div>

<div aos="zoom-in-up"></div>

<div aos="zoom-in-down"></div>

<div aos="zoom-in-left"></div>

<div aos="zoom-in-right"></div>

<div aos="zoom-out"></div>

<div aos="zoom-out-up"></div>

<div aos="zoom-out-down"></div>

<div aos="zoom-out-right"></div>

<div aos="zoom-out-left"></div>

Different settings examples

<div aos="fade-up"

     aos-duration="3000">

</div>

<div aos="fade-down"

     aos-easing="linear"

     aos-duration="1500">

</div>

<div aos="fade-right"

     aos-offset="300"

     aos-easing="ease-in-sine">

</div>

<div aos="fade-left"

     aos-anchor="#example-anchor"

     aos-offset="500"

     aos-duration="500">

</div>

<div aos="fade-zoom-in"

     aos-easing="ease-in-back"

     aos-delay="300"

     aos-offset="0">

</div>

<div aos="flip-left"

     aos-easing="ease-out-cubic"

     aos-duration="2000">

</div>

Anchor placement

<div aos="fade-up"

     aos-anchor-placement="top-bottom">

</div>

<div aos="fade-up"

     aos-anchor-placement="center-bottom">

</div>

<div aos="fade-up"

     aos-anchor-placement="bottom-bottom">

</div>

<div aos="fade-up"

     aos-anchor-placement="top-center">

</div>

<div aos="fade-up"

     aos-anchor-placement="center-center">

</div>

<div aos="fade-up"

     aos-anchor-placement="bottom-center">

</div>

AOS.init({

easing: 'ease-out-back',

duration: 1000

});

$('.hero__scroll').on('click', function(e) {

$('html, body').animate({

scrollTop: $(window).height()

}, 1200);

});

.hljs-comment {

color: #898ea4; }

/* Atelier-Sulphurpool Red */

.hljs-variable, .hljs-tag, .hljs-regexp, .hljs-name, .ruby .hljs-constant, .xml .hljs-tag .hljs-title, .xml .hljs-pi, .xml .hljs-doctype, .html .hljs-doctype, .css .hljs-id, .css .hljs-class, .css .hljs-pseudo {

color: deepskyblue; }

.hljs-attribute {

color: lightskyblue; }

/* Atelier-Sulphurpool Orange */

.hljs-number, .hljs-preprocessor, .hljs-built_in, .hljs-literal, .hljs-params, .hljs-constant {

color: #c76b29; }

/* Atelier-Sulphurpool Yellow */

.ruby .hljs-class .hljs-title, .css .hljs-rule .hljs-attribute {

color: #c08b30; }

/* Atelier-Sulphurpool Green */

.hljs-string, .hljs-value, .hljs-inheritance, .hljs-header, .ruby .hljs-symbol, .xml .hljs-cdata {

color: darkorange; }

/* Atelier-Sulphurpool Aqua */

.hljs-title, .css .hljs-hexcolor {

color: #22a2c9; }

/* Atelier-Sulphurpool Blue */

.hljs-function, .python .hljs-decorator, .python .hljs-title, .ruby .hljs-function .hljs-title, .ruby .hljs-title .hljs-keyword, .perl .hljs-sub, .javascript .hljs-title, .coffeescript .hljs-title {

color: #3d8fd1; }

/* Atelier-Sulphurpool Purple */

.hljs-keyword, .javascript .hljs-function {

color: #6679cc; }

.hljs {

display: block;

overflow-x: auto;

background: #202746;

color: #979db4;

padding: 0.5em;

-webkit-text-size-adjust: none; }

.coffeescript .javascript, .javascript .xml, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata {

opacity: 0.5; }

body {

font-family: Helvetica,Tahoma;

margin: 0;

padding: 0;

overflow-x: hidden; }

*, *:before, *:after {

box-sizing: border-box; }

a {

text-decoration: none;

color: #FF4081; }

/**

* Backgrounds

*/

.backgrounds {

width: 100%;

height: 100%;

position: fixed;

-webkit-transform: translateZ(0);

transform: translateZ(0);

z-index: -1; }

.backgrounds .background {

width: 100%;

height: 100%;

background-size: cover;

position: absolute;

left: 0;

top: 0;

background-attachment: fixed; }

.overlay:after {

content: '';

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

background: #3F51B5;

opacity: 0.8; }

/**

* Hero

*/

.hero {

width: 100%;

height: 100vh;

position: relative;

overflow: hidden;

color: #FFF;

text-align: center; }

.hero-center {

width: 100%;

position: absolute;

top: 40%;

left: 0;

-webkit-transform: translate(0, -50%);

-ms-transform: translate(0, -50%);

transform: translate(0, -50%); }

.hero__logo {

font-size: 60px;

color: rgba(0, 0, 0, 0.5); }

.hero__text {

font-weight: normal;

opacity: 0.8; }

.hero__scroll {

position: absolute;

bottom: 60px;

width: 200px;

margin: auto;

display: block;

cursor: pointer;

padding-bottom: 40px;

left: 0;

right: 0;

text-transform: uppercase; }

.hero__scroll .chevron {

margin-top: 20px;

display: block;

-webkit-animation: pulse 2s infinite;

animation: pulse 2s infinite;

color: #FF4081; }

@-webkit-keyframes pulse {

0% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0); }

50% {

-webkit-transform: translate(0, 10px);

transform: translate(0, 10px); }

100% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0); } }

@keyframes pulse {

0% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0); }

50% {

-webkit-transform: translate(0, 10px);

transform: translate(0, 10px); }

100% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0); } }

.octocat {

position: absolute;

top: 20px;

right: 20px;

width: 80px; }

.octocat img {

display: block;

width: 100%; }

.chevron::before {

border-style: solid;

border-width: 0.25em 0.25em 0 0;

content: '';

display: inline-block;

height: 20px;

position: relative;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

vertical-align: top;

width: 20px; }

.chevron.right:before {

left: 0;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg); }

.chevron.bottom:before {

top: 0;

-webkit-transform: rotate(135deg);

-ms-transform: rotate(135deg);

transform: rotate(135deg); }

.chevron.left:before {

left: 0.25em;

-webkit-transform: rotate(-135deg);

-ms-transform: rotate(-135deg);

transform: rotate(-135deg); }

/**

* Sections

*/

.section {

width: 100%;

float: left; }

.section-title {

text-align: center;

color: #FFF;

text-transform: uppercase;

font-weight: normal;

padding: 30px 0;

border-top: 1px solid rgba(255, 255, 255, 0.3);

border-bottom: 1px solid rgba(255, 255, 255, 0.3);

width: 100%;

clear: both; }

.container {

width: 970px;

margin: 0 auto;

max-width: 90%;

-webkit-transform: translateZ(1000px);

transform: translateZ(1000px); }

.code {

width: 40%;

clear: both;

height: 200px;

background: #FFF;

border-radius: 2px;

margin: 12vh 0;

padding: 10px; }

.code pre, .code code {

color:#333;

height: 100%;

margin: 0; }

.code code {

padding: 20px 0 0 20px; }

.code--small code {

padding-top: 75px; }

.code--left {

float: left; }

.code--right {

float: right; }

.code--wider {

width: 60%; }

.code--wider code {

padding-top: 60px; }

.section--more {

color: #FFF;

background: #0E0F34;

padding: 20px 0 40px 0; }

.section-group {

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

padding: 30px 0; }

.section-group h3 {

margin: 0 0 20px 0;

text-transform: uppercase; }

.section-group h4 {

font-weight: normal;

color: rgba(255, 255, 255, 0.6); }

.section-group code {

padding: 20px;

font-size: 1.2em; }

.section-group .btn {

margin-right: 20px; }

.btn {

padding: 10px 20px;

border: 1px solid #FF4081;

display: inline-block;

position: relative;

-webkit-transition: all 0.2s ease;

transition: all 0.2s ease;

overflow: hidden; }

.btn:before {

content: '';

position: absolute;

left: 0;

right: 0;

width: 1px;

top: 0;

bottom: 0;

margin: auto;

background: #FF4081;

-webkit-transition: -webkit-transform 0.2s ease;

transition: transform 0.2s ease;

z-index: 0;

opacity: 0; }

.btn span {

position: relative;

z-index: 5; }

.btn:hover {

color: #FFF; }

.btn:hover:before {

-webkit-transform: scaleX(200);

-ms-transform: scaleX(200);

transform: scaleX(200);

opacity: 1; }