emlog 给网站增加简单的loading加载特效

加载文字效果图:1.png

加载文字&图片效果图:12.png

大概的效果就是,当访客访问你的博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容。

下面开始进入操作步骤:

一、将以下代码应用在header.php(body)

<style>
.loading{opacity:0;background:#fff 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> 

可以很直观的看出,代码是通过CSS3动画控制的效果,所以很轻量,但是兼容浏览器没有JS的全面。

html代码就更简单了

二、同上操作位置

<div class="loading">Loading...</div> 
OK,完工。小伙伴折腾去把!
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
emlog 给网站增加简单的loading加载特效
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/loading_yd.html    百度已收录
正文到此结束

点击下方支持本站

点击支持下贵站吧
点击支持下贵站吧

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

微笑 可爱 憨笑 鼓掌 白眼 发呆 撇嘴 色 得意 吐 抠鼻 可怜 呲牙 惊讶 冷汗 流泪 大哭 发怒 抚摸 傲慢 惊恐 鄙视 疑问 奸笑 抓狂 偷笑 流汗 擦汗 晕 委屈 吓 衰 糗大了 威武 给力 牛逼

评论信息框

火箭正在发射中...

已有4条吐槽

子念

2016-09-11 10:55 湖南省长沙市电信
来看看
 Windows 7 x64   Google Chrome 45.0.2454.101

小陈

2016-09-11 18:51 湖南省衡阳市电信
@子念:face
 Windows 10 x64   Google Chrome 52.0.2743.116

岁月

2016-09-10 09:15 四川省成都市电信
好久没来看看了
 Huawei C8818   MQQBrowser 6.2

小陈

2016-09-10 13:04 湖南省衡阳市电信
@岁月:恩,欢迎回家哈。 face
 Windows 10 x64   Google Chrome 52.0.2743.116