页面加载动画效果

作者: 新篇章 | 来源:发表于2018-06-12 17:18 被阅读0次

页面加载动画效果
NProgress.js-页面加载进度条
教学：使用JS技术实现网页加载动画效果，网友：如今更厉害了
vue 中使用wow.js
CSS—动画加载中的弹跳小球
iOS开发:启动图动画效果
微信小程序下拉刷新 lodimg ... 动画效果
用过的JS库
Flutter - 页面转场动画
收藏的博客链接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .spinner {
                margin: 100px auto;
                width: 50px;
                height: 60px;
                text-align: center;
                font-size: 10px;
                display: none;
            }
            
            .spinner>div {
                /*background-color: #67CF22;*/
                background: #FFC000;
                height: 100%;
                width: 6px;
                display: inline-block;
                -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
                animation: stretchdelay 1.2s infinite ease-in-out;
            }
            
            .spinner .rect2 {
                -webkit-animation-delay: -1.1s;
                animation-delay: -1.1s;
            }
            
            .spinner .rect3 {
                -webkit-animation-delay: -1.0s;
                animation-delay: -1.0s;
            }
            
            .spinner .rect4 {
                -webkit-animation-delay: -0.9s;
                animation-delay: -0.9s;
            }
            
            .spinner .rect5 {
                -webkit-animation-delay: -0.8s;
                animation-delay: -0.8s;
            }
            
            @-webkit-keyframes stretchdelay {
                0%,
                40%,
                100% {
                    -webkit-transform: scaleY(0.4)
                }
                20% {
                    -webkit-transform: scaleY(1.0)
                }
            }
            
            @keyframes stretchdelay {
                0%,
                40%,
                100% {
                    transform: scaleY(0.4);
                    -webkit-transform: scaleY(0.4);
                }
                20% {
                    transform: scaleY(1.0);
                    -webkit-transform: scaleY(1.0);
                }
            }
        </style>
    </head>

    <body>
        <div class="spinner" id="loadAnimate_box">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </body>
</html>