快生活 - 生活常识大全

美化超炫旋转圆圈加载中蓝黑特效

⇨⇦
　　超炫CSS3旋转圆圈加载中蓝/黑特效，这款特效在很多站点里面都看到了，当然颜色可以自定义。这里就先举两个列子来说明下，大家可以随便DIY！如对代码结构不熟悉，可以联系我来帮您美化！
　　效果截图
　　代码-蓝色
　　#circle {
　　background-color: rgba(0,0,0,0);
　　border:5px solid rgba(0,183,229,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 #2187e7;
　　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 15px #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); }
　　}
　　代码-黑色
　　#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(20,20,20,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 15px #202020;
　　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); }
　　}
　　代码添加
　　在文章底部前加入
　　<div id=＂＂circle＂＂></div><div id=＂＂circle1＂＂></div>
　　在文章底部后加入
　　<script type=＂＂text/javascript＂＂>
　　$(window).load(function() {
　　$(＂#circle＂).fadeOut(500);
　　$(＂#circle1＂).fadeOut(700);
　　});
　　</script>
网站目录投稿：南曼