skroll实现滚动可视化入场动画效果代码-html代码-BFW代码库

skroll实现滚动可视化入场动画效果代码

代码语言：html

代码描述：skroll实现滚动可视化入场动画效果代码

下面为部分代码预览，完整代码请点击下载或在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">

 
        <style>
                *{
                        margin:0;
                        padding:0;
                }
                body{
                        background:#222;
                        font-family:'Baloo Bhaijaan',cursive;
                }
                h1,h2,h3{
                        text-align:center;
                }
                .container{
                        width:80%;
                        margin:0 auto;
                        overflow:hidden;
                }
                .box{
                        width:19%;
                        height:200px;
                        background:#ff5722;
                        float:left;
                        margin:.5%;
                        border-radius:15px;
                }
                .fw{
                        width:100%;
                }
                .green{
                        background:#8bc34a;
                }
                .yellow{
                        background:#ffc107;
                }
                .blue{
                        background:#03a9f4;
                }
                .violet{
                        background:#9c27b0;
                }
                .grey{
                        background:#607d8b;
                }
                .header{
                        height:auto;
                        color:#fff;
                        background:#ff9800;
                }
                .header h1{
                        padding:100px 0;
                        font-size:4em;
                }
                .w3{
                        width:32.333%;
                }
                .w4{
                        width:24%;
                }
                .w2{
                        width:49%;
                }
                .w5{
                        width:19%;
                }
                .h2{
                        height:400px;
                }
                .h5{
                        height:50px;
                }
        </style>
</head>
<body>
    <div class="container">
        <div class="box fw header">
            <h1>Skroll.js</h1>
        </div>
        <div class="box w3 anim1"></div>
        <div class="box w3 anim1"></div>
        <div class="box w3 anim1"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box anim2 green"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w4 anim3"></div>
        <div class="box w2 anim4 yellow h2"></div>
        <div class="box w2 anim4 yellow h2"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim5"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w4 anim6 blue"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet"></div>
        <div class="box w5 anim7 violet">&.........完整代码请登录后点击上方下载按钮下载查看