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

  • 内容
  • 相关

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;}

此代码搬自岁月博客

本文标签:

版权声明:若无特殊注明,本文皆为《灵曦博客》原创,转载请保留文章出处。

本文链接:为emlog首页加上一个loading等待特效 - http://www.lxssy.cn/post-167.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  • 去顶部
sitemap