Loper主题添加特效旋转球Loper主题本来就是很低调很简单的主题,我个人喜欢把主题乱添加其他强大特效功能,拽立网,偶尔给我发现一个好看又好玩的特效旋转球,本人感觉特效旋转球效果不错就拿装饰用改为永久一直旋转,今天我把Loper主题添加特效旋转球方法分享给大家,请看以下操作!

添加后的效果!

Loper主题添加特效旋转球

Loper主题添加特效旋转球

1.登陆你的后台管理,选择【外观】-【编辑】-【底部 (footer.php)】

直接添加以下全部代码:【放在最顶部】-【默认是15秒消失】

<!--主题特效旋转球-->
<div id="circle"></div><div id="circle1"></div>
<script>
jQuery(window).load(function() {
jQuery("#circle").fadeOut(15);
jQuery("#circle1").fadeOut(15);});
</script>

 

2.登陆你的后台管理,选择【外观】-【编辑】-【样式表 (style.css)】

直接添加以下全部代码:

/*--主题特效旋转球--*/
#circle {
position:fixed;
bottom:30px;
left:30px;
z-index:1000;
margin:0 auto;
width:50px;
height:50px;
border:5px solid rgba(10,10,10,0.9);
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
background-color: rgba(0,0,0,0);
box-shadow: 0 0 35px #808080;
opacity:.9;
-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 {
position:fixed;
bottom:40px;
left:40px;
z-index:1000;
margin:0 auto;
width:30px;
height:30px;
border:5px solid rgba(20,20,20,0.9);
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
background-color: rgba(0,0,0,0);
box-shadow: 0 0 15px #202020;
opacity:.9;
-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% { box-shadow:0 0 1px #505050; opacity:0; -moz-transform:rotate(160deg);}
50% { opacity:1; -moz-transform:rotate(145deg); }
100% { opacity:0; -moz-transform:rotate(-320deg); }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
0% { box-shadow:0 0 1px #505050; opacity:0; -webkit-transform:rotate(160deg); }
50% { opacity:1; -webkit-transform:rotate(145deg);}
100% { opacity:0; -webkit-transform:rotate(-320deg); }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
0% { box-shadow:0 0 1px #505050; opacity:0; -o-transform:rotate(160deg); }
50% { opacity:1; -o-transform:rotate(145deg);}
100% { opacity:0; -o-transform:rotate(-320deg); }
}
@-o-keyframes spinoffPulse {
0% { -o-transform:rotate(0deg); }
100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
0% { box-shadow:0 0 1px #505050; opacity:0; -ms-transform:rotate(160deg); }
50% { opacity:1; -ms-transform:rotate(145deg);}
100% { opacity:0; -ms-transform:rotate(-320deg); }
}
@-ms-keyframes spinoffPulse {
0% { -ms-transform:rotate(0deg); }
100% { -ms-transform:rotate(360deg); }
}

 

3.如果你喜欢【永久】特效球效果!一直添加以下全部代码:

<!--主题特效旋转球-->
<div id="circle"></div><div id="circle1"></div>
<script>
jQuery(window).load(function() {
jQuery("#circle").fadeOut(-);
jQuery("#circle1").fadeOut(-);});
</script>

 

提示:默认是【15秒】可以改为你想要的时间,如果喜欢永久的直接改为【符号】就行了,也可以输入【99999】!

» 原创文章:《Loper主题添加特效旋转球》 » 本文地址:《http://www.zlinet.com/88.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^