aos实现页面滚动显示内容动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：aos实现页面滚动显示内容动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aos.css">
<style>
@charset "utf-8";
/*框架预览 CSS*/
.mkeBody {
background: #121212;
}
.mkeHeadBox {
padding: 30px 10px;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
color: #fff;
text-align: center;
overflow: hidden;
border-bottom: 3px solid #666;
box-shadow: inset 0 -2px 3px #000000;
letter-spacing: 1px;
font: 26px/26px "微软雅黑";
}
.mkeFooterBox {
padding: 25px 10px;
text-overflow: ellipsis;
margin: 0;
color: #fff;
font-size: 14px;
line-height: 24px;
text-align: center;
overflow: hidden;
border-top: 3px solid #666;
box-shadow: inset 0 2px 3px #000000;
}
.mkeContentBox {
background: #036;
padding: 50px 0 50px 0
}
section {
background: #036;
}
.mkeContentBox:after {
height: 0;
clear: both;
}
.mkeFooterBox p,.mkeFooterBox div {
padding: 0;
margin: 0;
line-height: 26px;
font-size: 14px;
}
.mkeFooterBox a {
color: #fff;
white-space: nowrap
}
.mkeButton {
background: #F36;
display: inline-block;
text-decoration: none;
width: 102px;
border-radius: 0.3em;
transition: all 0.3s ease
}
.mkeButton:hover {
background: #FF1550;
}
.mkeURL {
font-size: 24px;
}
.mkeFooterBox .mKeBannerAD {
width: 728px;
height: 90px;
margin: 18px auto 0;
}
.mkeFooterBox .mSmallKeBannerAD {
display: none;
}
@media only screen and (max-width:900px) {
.mkeButton {
display: block;
margin: 8px auto 0;
}
}
@media only screen and (max-width:767px) {
.mkeHeadBox {
font-size: 18px;
padding: 15px 10px;
}
.mkeFooterBox p,.mkeFooterBox div {
line-height: 24px;
font-size: 12px;
}
.mkeURL {
font-size: 22px;
}
.mkeFooterBox .mKeBannerAD {
display: none;
}
.mkeFooterBox .mSmallKeBannerAD {
width: 300px;
height: 250px;
margin: 18px auto 0;
display: block;
}
}
/*End*/
/*主要CSS*/
/* Palette generated by Material Palette - materialpalette.com/indigo/pink */
/* Base16 Atelier Sulphurpool Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
/* Atelier-Sulphurpool Comment */
.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;
background:#036 ;
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 {
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;
}
</style>
</head>
<body>
<header class="hero">
<div class="hero-center">
<h1 style="font-family:Microsoft YaHei">aos.js-超赞页面滚动元素动画jQuery动画库</h1>
<h2 class="hero__text" aos="fade-up&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0