超炫CSS3旋转圆圈加载中蓝/黑特效《wp主题美化》

折腾博客

文章最后更新时间:2024年04月16日

超炫CSS3旋转圆圈加载中蓝/黑特效,这款特效在很多站点里面都看到了,当然颜色可以自定义。这里就先举两个列子来说明下,大家可以随便DIY!如对代码结构不熟悉,可以联系我来帮您美化!

效果截图:

超炫CSS3旋转圆圈加载中蓝/黑特效《wp主题美化》

代码-蓝色加载

#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>
文章版权声明:除非注明,否则均为折腾博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,425人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码