常見的頁面加載動畫實現方法

時間 2019-11-08

標籤常見的頁面加載動畫實現方法简体版

原文原文鏈接

加載動畫js方法javascript

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #wrapper {
                background: #fff;
                opacity: 1;
                position: fixed;
                z-index: 10;
                top: 0px;
                width: 100%;
                height: 1600px;
            }
            
            #loader {
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
                width: 200px;
                height: 200px;
                margin: 300px auto;
            }
        </style>
        <script>
            window.addEventListener("load", function() {
                var wrapper = document.getElementById("wrapper");
                document.body.removeChild(wrapper);
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="loader"></div>
        </div>
        <span>動畫加載完畢</span>
    </body>

</html>

原生js的load方法，沒有依賴。css

加載動畫jq方法html

1.使用setTimeout方法java

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrapper {
                position: relative;
                height: 100%;
                width: 100%;
            }
            
            #loader-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1000;
                background: #fff;
            }
            
            #loader {
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
                display: block;
                position: relative;
                left: 50%;
                top: 50%;
                width: 200px;
                height: 200px;
                margin: -100px 0 0 -100px;
                z-index: 1001;
            }
            
            .loaded #loader {
                opacity: 0;
            }
            
            .loaded #loader-wrapper {
                visibility: hidden;
            }
        </style>

    </head>

    <body>
        <div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
            <span>動畫加載完畢</span>
        </div>
        <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                setTimeout(function() {
                    $('.wrapper').addClass('loaded');
                }, 3000);
            });
        </script>
    </body>

</html>

模擬動畫效果（沒什麼卵用）jquery

2.使用load方法css3

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat rgb(249, 249, 249);
            }
        </style>

    </head>

    <body>
        <div class="loader"></div>
        <span>動畫加載完畢</span>
        <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loader").fadeOut("slow");
            })
        </script>
    </body>

</html>