css3怎么实现圆形旋转按钮

本篇内容介绍了“css3怎么实现圆形旋转按钮”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

之前已经为大家介绍了好几款css3按钮，今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮。旋转的角度可以自己调整。在demo中演示了三个角度旋转。360度，60度，-360度。如图：

 

源码下载

看下实现代码：

html代码：

代码如下:

<b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="yahoo.png" /></a>
</p>
<p>
<b>60 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="yahoo.png" /></a>
</p>
<p>
<b>-360 degree spin onMouseover ONLY</b></p>
<p id="socialicons3">
<a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" class="lazy" data-src="yahoo.png" /></a>
</p>

css代码：

代码如下:

p#socialicons img
{

-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img
{

-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover
{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img
{

}
p#socialicons3 img:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

“css3怎么实现圆形旋转按钮”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！