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   百度未收录

发表评论

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

评论

4条评论
  1. avatar

    子念 Lv.1    湖南省长沙市 电信    回复

    来看看

    1. 头像

      小陈    湖南省衡阳市 电信    回复

      回复了子念:表情

  2. avatar

    岁月 Lv.1    四川省成都市 电信    回复

    好久没来看看了

    1. 头像

      小陈    湖南省衡阳市 电信    回复

      回复了岁月:恩,欢迎回家哈。 表情

00:00 / 00:00
顺序播放