当前位置:首页 » 好文分享 » 详情

    给emlog添加页面加载特效

    首先声明这特效代码是我在王小刀博客看到的,我觉得蛮可爱就把代码分享给大家吧!

    1.首先在</body>之前加上如下代码:
    <div id="circle"></div>
    	<div id="circletext"></div>
    <div id="circle1"></div>

    2.再加上一段JS
    <script type="text/javascript">
    $(function () {
    $("#circletext").text("加载肿");
    	$(window).load(function() {
    		$("#circle").fadeOut(400);
    		$("#circle1").fadeOut(600);
    		$("#circletext").text("完成鸟").fadeOut(800);
    	});
    });
    //-->
    </script>

    3.加上css

    	/* 圆圈加载*/
    #circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba
    
    (0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 
    
    auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite 
    
    linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}
    #circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba
    
    (0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 
    
    auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s 
    
    infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}
    #circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}
    @-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate
    
    (145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}
    @-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
    @-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-
    
    transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}
    @-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
    @-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate
    
    (145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}
    @-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
    @-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate
    
    (145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}
    @-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}
    

    就是这么简单的,效果:


    Emlog加载特效 Emlog加载特效


    打赏
    X
    打赏方式:
    • 支付宝
    • 微信
    • QQ红包

    打开支付宝扫一扫
    日期:2014年09月01日 00:01:16 星期日   分类:好文分享   浏览(99467)   评论(33)
    本文地址:https://www.blogs.hk/post-338.html   [百度已收录]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
    版权所有:《博客之家
    文章标题:《给emlog添加页面加载特效
    除非注明,文章均为 《博客之家》 原创
    转载请注明本文短网址:https://www.blogs.hk/post-338.html  [生成短网址]

    留言咨询

    自动获取QQ

    昵称

    邮箱

    网址

    23楼、慕浟佳 [回复该留言]
    2014-11-15 20:31
    能体会图片就好了!
    22楼、 [回复该留言]
    2014-09-06 17:21
    总是觉得有点得不偿失
    21楼、牛人牛事 [回复该留言]
    2014-09-05 22:11
    全看不懂,不过也来过了一趟,欢迎互访
    20楼、pptv官方下载 [回复该留言]
    2014-09-05 09:26
    有机会试试1 应该不错吧
    19楼、王小刀 [回复该留言]
    2014-09-04 18:32
    首先声明,这特效是我从网址已屏蔽(www.blogs.hk/)
    李明 [回复该留言]
    2014-09-04 21:59
    @王小刀:谢谢你扒来的代码。
    王小刀 [回复该留言]
    2014-09-04 22:02
    @李明:又换板了
    李明 [回复该留言]
    2014-09-04 22:16
    @王小刀:是的,之前的模板加载太慢了,现在的模板简洁、加载快。
    18楼、奇葩 [回复该留言]
    2014-09-04 17:41
    学习了 以后可以搞搞特效
    17楼、免费部落 [回复该留言]
    2014-09-04 10:20
    这个应该换到wordpress上也可用的!
    16楼、教程大全论坛 [回复该留言]
    2014-09-04 08:58
    成功的秘诀,在永不改变既定的目的。 ——   悟空网赚来访,欢迎互访
    15楼、南京艺考培训 [回复该留言]
    2014-09-03 15:39
    代码这东西真心看不懂。。。
    14楼、纳众 [回复该留言]
    2014-09-03 14:15
    真心看不懂   好强大的数据库       支持   欢迎互访哈
    13楼、冠名网 [回复该留言]
    2014-09-03 09:43
    支持一些博主,加特效样式那么多,而且JS也没封装在文件里面,会不会影响网站优化和打开速度啊。
    李明 [回复该留言]
    2014-09-03 10:35
    @冠名网:影响不大的,你可试试效果如果。
    冠名网 [回复该留言]
    2014-09-03 13:57
    @李明:额,有机会试试。
    12楼、蓝天博客 [回复该留言]
    2014-09-03 08:10
    在别的博客也有看到,哈哈,挺喜欢这个的!

        站点统计

        • 收录网址:3370 个
        • 发布文章:3008 条
        • 在线人数:1人
        • 总访问量:270554918次
        • 本站运行:12年5月3天
        Copyright © 2025 博客之家 版权所有  
        關於本站免責聲明sitemap新站登錄