aos实现页面滚动显示内容动画效果代码-html代码-BFW代码库

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