WordPress网站美化之添加旋转动态圆圈

由老白博客@老白整理自网络的WordPress网站美化之添加旋转动态圆圈教程，原则上适用于大部分WordPress主题。

1.演示效果

2.美化教程

主题文件，footer.php底部，代码<?php wp_footer(); ?>后面，body标签之前，添加以下代码即可

位置代码

<div id="circlesdk" style="opacity: 1;"></div>
<div id="circletext" style="opacity: 1;"></div>
<div id="circlesdk1" style="opacity: 1;"></div>

样式代码

<style>
@media screen and (max-width: 768px){
div#circlesdk {display:none;}
div#circletext {display:none;}
div#circlesdk1 {display:none;}
}
#circlesdk{opacity:0;filter:alpha(opacity='0') background-color:#ffffff;border:5px solid #FF0000;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 #FF0000;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}#circlesdk1{opacity:0;filter:alpha(opacity='0') background-color:#ffffff;border:6px solid #FF0000;opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #FF0000;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}#circletext{opacity:0;filter:alpha(opacity='0') width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;color:#F00}@-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);}}
</style>

相关的美化教程大家点击文末阅读