小雨科技 _武汉网站建设_武汉小程序搭建

看到别人的加载特效，简直叼渣天啊，立马搜索了下，这不陌小雨给大家带来了：

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>

去看看陌小雨首页的左下角吧，是不是酷毙了！