emlog增加Loading加载特效

添加在主题文件的header.php。尽量靠前。效果见本站。可以把代码里的img url换成你想要的加载图片链接。下面是代码:

  <style>
.loading{opacity:0;background:#fff url(img url);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style> 
<div class="loading">Loading...</div>

本博客所有文章如无特别注明均为原创。作者:创始人大大复制或转载请以超链接形式注明转自 阳光博客
原文地址《emlog增加Loading加载特效
分享到:更多

相关推荐

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)