为emlog首页加上一个loading等待特效

  • 首页 > 代码研究院 > emlog
  • 作者:梓熙
  • 时间: 2016年10月7日 21:25
  • 字数:3652 个
  • 字号:
  • 评论:3 条
  • 浏览:480 次
  • 百度:百度已收录
  • 分类: emlog
  • 时间:2016-10-7 21:25 热度:480° 评论:3 条 

    html代码添加:


    <div id="loading"> <div style=" font-weight:bold;text-align:center;top: 50%;margin-top: 140px;color:#000" class="loading-text">正在努力加载,请稍等^_^...</div> 
    <div id="loading-center"> 
    <div id="loading-center-absolute">
    <div class="object" id="object_one"></div>
    <div class="object" id="object_two"></div>
    <div class="object" id="object_three"></div>
    <div class="object" id="object_four"></div>
    <div class="object" id="object_five"></div>
    <div class="object" id="object_six"></div>
    <div class="object" id="object_seven"></div>
    <div class="object" id="object_eight"></div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    setTimeout(function(){
    jQuery('#loading-center').parent().slideUp('slow');
    },1500);
    </script>


    css添加


    #loading{background-color: #fff;background-image: url(http://ww3.sinaimg.cn/large/0060lm7Tgw1f8k0lwbyshj308c08cgln.jpg);height: 100%;width: 100%;position: fixed;z-index: 999999999;margin-top: 0px;top: 0px;}
    #loading-center{width: 100%;height: 100%;position: relative;}
    #loading-center-absolute{position: absolute;left: 50%;top: 30%;height: 150px;width: 150px;margin-top: -75px;margin-left: -75px;-moz-border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;}
    .object{width: 20px;height: 20px;background-color: #FFF;position: absolute;-moz-border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;-webkit-animation: animate 0.8s infinite;animation: animate 0.8s infinite;}
    #object_one{top: 19px;left: 19px;background-color: #FF6651;}
    #object_two{top: 0px;left: 65px;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;background-color: #2CDB87;}
    #object_three{top: 19px;left: 111px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;background-color: #EA84FF;}
    #object_four{top: 65px;left: 130px;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;background-color: #FDAC5F;}
    #object_five{top: 111px;left: 111px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;background-color: #76BDFF;}
    #object_six{top: 130px;left: 65px;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;background-color: #C7C183;}
    #object_seven{top: 111px;left: 19px;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;background-color: #16C0F8;}
    #object_eight{top: 65px;left: 0px;-webkit-animation-delay: 0.7s;animation-delay: 0.7s;background-color: #C7C183;}
    @-webkit-keyframes animate{25%{-ms-transform: scale(1.5);-webkit-transform: scale(1.5);transform: scale(1.5);}
    75%{-ms-transform: scale(0);-webkit-transform: scale(0);transform: scale(0);}}
    @keyframes animate{50%{-ms-transform: scale(1.5,1.5);-webkit-transform: scale(1.5,1.5);transform: scale(1.5,1.5);}
    100%{-ms-transform: scale(1,1);-webkit-transform: scale(1,1);transform: scale(1,1);}} 
    .article-wechatitem{display: none}
    #greeting{background: #32A5E6;color: #fff;padding: 15px}
    #greeting .messages-content{float: left;width: 99%}
    #greeting p{margin: 0;font-size: 16px;display: inline-block;width: 100%}
    #greeting a{color: #fff}
    #greeting .close-greeting{float: right;margin-right: 0px;color: #fff;cursor: pointer}
    .div2{top: 10px;z-index: 999;position: fixed;_position: absolute}
    .div2 img{width: 85%;height: auto}
    #load{background-color: #16C0F8;;height: 3px;width: 0px;position: fixed;left: 0px;top: 0px;z-index: 9999;}


    大佬们如有需要请自行斟酌更改,

    好困啊

    demohttp://zixiylw.top/demo/loading/loading.html

    2016.10.07 21:25首发

    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://zixiylw.top/55.html
    版权声明:若无特殊注明,本文皆为《梓熙》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有3条吐槽

    无邪

    2016-10-14 14:52 世界美国加州三藩CloudFlare公司AS13335任播网络CDN全球节点(CLOUDFLARENET)(WorldAnyCast)
    添加在哪里,麻烦博主具体说明下,谢谢!
     未知操作系统   未知浏览器

    【= 。 =】

    2016-10-29 16:06 重庆市电信
    @无邪:代码加在网站的头部<body>里面,然后css加在模版css里面,刷新网站就可以看见有等待特效了
     未知操作系统   未知浏览器

    suppore

    2016-10-09 14:23 美国CloudFlare公司CDN节点
    厉害了啊
     未知操作系统   未知浏览器

                   

    返回顶部    返回首页    手气不错    后花园   
    版权所有:梓熙博客    站点维护: 梓熙   +主题模板:【PJAX 梓熙主题】        sitemap