WordPress美化:超炫CSS3旋转圆圈加载中蓝/黑特效

微饭网官方微信
weeiy

在许多WordPress博客都看到了这个特效,找了许久终于找到了,微饭直接Copy过来了,有蓝色和黑色两种颜色,可以根据自己主题选择。

蓝色版

/* 超炫CSS3旋转圆圈加载中特效 蓝色版 */
/* 微Fan'天空 www.weeiy.com*/
#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); }   
}

 在文章底部</footer>前加入

<div id="circle"></div> <div id="circle1" ></div>

 在文章底部</footer>后加入

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

 

发表评论
加载中...
  • Loser 3年前 (2015-09-01)

    博主这个怎么设置出现旋转的时间,他一直转不好看

  • dazi 3年前 (2015-08-20)

    有的wordpress要改成下面的才能用:

    jQuery(window).load(function() {
    jQuery(“#circle”).fadeOut(500);
    jQuery(“#circle1”).fadeOut(700);
    });

  • 11 3年前 (2015-06-22)

    文章底部 是哪个文件的?

  • 00 3年前 (2015-06-07)

    那个蓝色代码放到哪里啊

    查看对话
    • 微饭君 微Fan 3年前 (2015-06-07) 官方

      在文章底部前加入

    • 微饭君 微Fan 3年前 (2015-06-07) 官方

      蓝色CSS 放到你主题的 style.css 里面!

  • 0.0 4年前 (2014-12-16)

    代码 蓝色的代码放在那里

  • 张致轩 4年前 (2014-12-11)

    求添加的详细教程,小白搞不懂

    查看对话
  • 陌小雨 4年前 (2014-10-15)

    确实很炫哦,我主题自带的就显得太中庸了。。陌小雨

    查看对话
  • 微饭君 微Fan 4年前 (2014-10-12) 官方

    TEST

相关文章