一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整

2020-05-12 08:01:52易采站长站整理

之前已经为大家介绍了好几款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″ src=”rss.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”delicious.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”facebook.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”twitter.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ 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″ src=”rss.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”delicious.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”facebook.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”twitter.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ 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″ src=”rss.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”delicious.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”facebook.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”twitter.png” /></a> <a href=”http://www.w2bc.com/”>
<img border=”0″ src=”yahoo.png” /></a>
</p>

css代码:


p#socialicons img
{
/* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;