首页 技术

loading动画效果就是各位进入本站时候的那种效果,由于截图困难,各位也可以刷新文章,查看一下效果,那么我们直接上代码。

<style>#PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}#PageLoading-center{width:100%;height:100%;position:relative;}#PageLoading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.object{-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;position:absolute;border-left:5px solid #000;border-right:5px solid #000;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2s infinite;animation:animate 2s infinite;}#object_one{left:75px;top:75px;width:50px;height:50px;}#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}</style>

 <div id="PageLoading" style="z-index:999999;">
        <div id="PageLoading-center">
            <div id="PageLoading-center-absolute">
                <div class="object" id="object_four"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_one"></div>
            </div>
        </div>
    </div>

这两串代码直接丢到头部即可使用,不同博客使用方法不同,我就不一一讲解。
将以下代码加到底部</body>之前,那我们直接上代码!

<script>$(function(){ $("#PageLoading").fadeOut(530); });  </script>

这样你们就可以使用啦!




文章评论

    星客·肥啾 访客ChromeWindows
    2021-02-20 14:47   回复

    网速太快的大佬无法截图(不应该是录屏嘛,为啥是截图

      南瓜奶酪 站长ChromeAndroid
      2021-02-20 14:50   回复

      录屏这玩意不适合我

        OKay 访客ChromeWindows
        2021-02-21 16:45   回复

        友情链接:https://blog.china97.cn/Record-Screen.html