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

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

    留言咨询

    自动获取QQ

    昵称

    邮箱

    网址

    11楼、成人用品 [回复该留言]
    2014-09-02 22:45
    来了就是为了支持博主,呵呵
    10楼、健康减肥博客 [回复该留言]
    2014-09-02 21:46
    挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!
    9楼、PHP二次开发 [回复该留言]
    2014-09-02 20:19
    还不错
    8楼、IRONFX AFF [回复该留言]
    2014-09-02 19:04
    呵呵!
    7楼、姜辰 [回复该留言]
    2014-09-02 14:32
    介个感觉没啥用额……
    李明 [回复该留言]
    2014-09-02 20:35
    @姜辰:我也沒用,哈哈!
    6楼、Louis Han [回复该留言]
    2014-09-02 13:10
    大家都在页面加载,实际上不过是一晃而过
    5楼、健康减肥法 [回复该留言]
    2014-09-02 12:51
    挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!
    4楼、香港云主机 [回复该留言]
    2014-09-02 10:38
    博主写得很好,幸苦了,以后会常来的。
    3楼、zhanglei [回复该留言]
    2014-09-02 10:35
    你博客导航的调整页面好像失效了,就是那个 go/?url=
    李明 [回复该留言]
    2014-09-02 12:25
    @zhanglei:现在没事了,谢谢!
    李明 [回复该留言]
    2014-09-03 09:17
    @zhanglei:贵站不能留言。
    2楼、张赛博客 [回复该留言]
    2014-09-02 09:06
    这么折腾,好吗
    李明 [回复该留言]
    2014-09-02 09:12
    @张赛博客:虽然我工作很忙很辛苦的,但我很爱折腾,觉得人生更充实更有意思的。
    1楼、灰常记忆 [回复该留言]
    2014-09-01 23:52
    哈哈~  现在不折腾这下了。

        站点统计

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