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&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0