zoukankan      html  css  js  c++  java
  • 利用css实现页面加载时旋转动画

    有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来,

    html如下

    <div id="page-loader" class="fade in"><span class="spinner"></span></div>

    css样式如下

    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg)
        }
    
        to {
            -webkit-transform: rotate(359deg)
        }
    }
    
    @-moz-keyframes rotation {
        from {
            -moz-transform: rotate(0deg)
        }
    
        to {
            -moz-transform: rotate(359deg)
        }
    }
    
    @-o-keyframes rotation {
        from {
            -o-transform: rotate(0deg)
        }
    
        to {
            -o-transform: rotate(359deg)
        }
    }
    @keyframes rotation {
        from {
            transform: rotate(0deg)
        }
    
        to {
            transform: rotate(359deg)
        }
    }
    .fade.in {
        filter: alpha(opacity=100);
    }
    .fade.in {
        opacity: 1;
    }
    .fade {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity .3s linear;
        transition: opacity .3s linear;
    }
    .fade {
        opacity: 0;
        -webkit-transition: opacity .15s linear;
        -o-transition: opacity .15s linear;
        transition: opacity .15s linear;
    }
        .fade.in .spinner, .fade.in .spinner-small {
        -webkit-animation: rotation .6s infinite linear;
        -moz-animation: rotation .6s infinite linear;
        -o-animation: rotation .6s infinite linear;
        animation: rotation .6s infinite linear;
    }
    .spinner{
        height: 40px;
        width: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -20px -20px 0 0;
        border: 2px solid #fff;
        border-top: 2px solid #24B498;
        border-radius: 100%;
    }
            #page-loader.fade.in {
        display: block;
    }
    #page-loader.fade {
        display: none;
    }
    #page-loader {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #E6E8EC;
    }

    效果就出来了,不过别忘了页面加载完后隐藏额,不然会一直转到天亮,根本停不下来!

    document.getElementById('page-loader').className='fade'
    jQuery代码如下
    $('#page-loader').removeClass('in');

    这样页面加载或者异步提交表单时时不时感觉好多了?不管你信不信,反正我信了

  • 相关阅读:
    WP&Win10仿微信消息框代码分享
    Windows编程中回调函数的使用心得(MFC篇)
    进程间通信之WM_COPYDATA方式反思,回顾和总结
    华为的最新的两道算法设计题
    Python中3元运算符的实现
    Python Logging 模块研究
    LINUX下CPU Load Average的一点研究
    64位系统下,一个32位的程序究竟可以申请到多少内存,4GB还是更多?(一)
    Pyscripter 不能正确调用另一文件中模块的问题的解析(Internal Engine 和 Remote Engine)
    Django 最佳实践
  • 原文地址:https://www.cnblogs.com/shatanku/p/5152902.html
Copyright © 2011-2022 走看看