• 注册
  • WordPress建站 WordPress建站 关注:0 内容:23

    xiu主题添加加载特效

  • 查看作者
  • 打赏作者
  • Lv.1
    青铜会员 VIP 1
    靓号:888
    官方

    看到别人的加载特效,简直叼渣天啊,立马搜索了下,这不知鹅给大家带来了:

    1、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:50px;      
        height:50px;      
            margin:0 auto;             
        position:fixed;      
            left:30px;      
            bottom:30px;      
        -moz-animation:spinPulse 1s infinite ease-in-out;      
        -webkit-animation:spinPulse 1s infinite ease-in-out;      
        -o-animation:spinPulse 1s infinite ease-in-out;      
        -ms-animation:spinPulse 1s infinite ease-in-out;      
    }      
    #circle1 {      
        background-color: rgba(0,0,0,0);      
        border:5px solid rgba(0,183,229,0.9);     
        opacity:.9;      
        border-left:5px solid rgba(0,0,0,0);      
        border-right:5px solid rgba(0,0,0,0);      
        border-radius:50px;      
        box-shadow: 0 0 35px #2187e7;       
        width:30px;      
        height:30px;      
            margin:0 auto;      
            position:fixed;      
            left:40px;      
            bottom:40px;      
        -moz-animation:spinoffPulse 1s infinite linear;      
        -webkit-animation:spinoffPulse 1s infinite linear;      
        -o-animation:spinoffPulse 1s infinite linear;      
        -ms-animation:spinoffPulse 1s infinite linear;      
    }      
    @-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); }      
    }

    2、js

    <code><div id="circle"></div> <div id="circle1" ></div></code>
    <script type="text/javascript">
    $(window).load(function() {
    $("#circle").fadeOut(500);
    $("#circle1").fadeOut(700);
    });
    </script>

    去看看知鹅首页的左下角吧,是不是酷毙了!

    xiu主题添加加载特效

    请登录之后再进行评论

    登录
  • 偏好设置
  • 做任务
  • 实时动态
  • 帖子间隔 侧栏位置: