您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

30款CSS3实现的加载Loading时特效

发布时间:2016-03-02编辑:余斗文件大小:359KB阅读:(0)字号:
      这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画。当你点击页面的任何一个地方时,loading动画就会被隐藏。   这30种loading动画分为3组:方形加载动画特效圆形加载动画特效和长条形加载动画特效。每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码。   该代码素材是一款基于css3动画属性animation实现的loading加载动画效果,酷炫页面加载动画代码素材。(兼容测试:IE10、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器)   使用方法   1、调用CSS样式:

    <link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css">
    <link href="_css/main.css" rel="stylesheet" type="text/css">
     
      2、调用JS插件代码:

    <script type="text/javascript" src="_scripts/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="_scripts/main.js"></script>
     
        实现方法:   1、Html结构   下面是第一种效果的制作方式。所有的DEMO都是使用嵌套div的HTML结构。在第一个DEMO中,嵌套了4层div元素,其中最里层的div#object是用于动画的元素。

    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div id="object"></div>
            </div>
        </div>
    </div>
     
      外层的div元素主要用于定位。   2、CSS样式   首先要设置最外层的div的定位方式为固定定位方式,这样方便它里面的元素制作各种动画效果。

    #loading{
        background-color: #bd4932;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }
     
      接着分别设置第二层和第三层div元素。第二层div元素设置为相对定位,宽度和高度均为100%。第三层div是实际动画元素的包裹元素,它设置为绝度定位,并且位置居中。

    #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
    }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
    }
     
      最后,使用keyframes帧动画使div#object元素动起来,@-webkit-keyframes animate是为了兼容webkit内核的浏览器。@keyframes animate则是为了兼容IE浏览器。

    #object{
        width: 80px;
        height: 80px;
        background-color: #FFF;
        -webkit-animation: animate 1s infinite ease-in-out;
        animation: animate 1s infinite ease-in-out;
        margin-right: auto;
        margin-left: auto;
        margin-top: 60px;
    }
    @-webkit-keyframes animate {
        0% { -webkit-transform: perspective(160px); }
        50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
        100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
    }
       
    @keyframes animate {
        0% {
            transform: perspective(160px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
        } 50% {
            transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
            -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
        } 100% {
            transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
            -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
        }
    }
     
      3、JAVASCRIPT   插件中还使用了一些jQuery代码来隐藏loading效果。

    $(window).load(function() {
        $("#loading-center").click(function() {
        $("#loading").fadeOut(500);
        })
    });        
     
      在实际应用中,你可能需要这样使用这些Loading效果:

    $(window).load(function() {
          $("#loading").fadeOut(500);
    })         
     
      上面的代码表示在页面加载完成之后0.5秒的时间内将loading动画淡入淡出隐藏起来。
     
    30款CSS3实现的加载Loading时特效
    效果展示1

    30款CSS3实现的加载Loading时特效
    效果展示2

    30款CSS3实现的加载Loading时特效
    效果展示3

    30款CSS3实现的加载Loading时特效
    解压后的文件

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词css3 Loading
余斗余斗
  1. 转载请注明: 30款CSS3实现的加载Loading时特效_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html5模版 分类下,于2016-03-02最后更新
简单好玩的鼠标经过图标时动画效果
推荐一个网页加载后图片翻转效果的CSS3代码
手机扫一扫 随身带着看
鸿运国际手机登录首页