首页 > 代码库 > 纯css3实现的圆形旋转分享按钮
纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮，今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮。旋转的角度可以自己调整。在demo中演示了三个角度旋转。360度，60度，-360度。如图：
在线预览 源码下载
看下实现代码：
html代码：
<b>360 degree spin onm ouseover and onm ouseout</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 onm ouseover and onm ouseout</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 onm ouseover 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 onm ouseover and out */ -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 { /* 2nd set of icons. Rotate them 60deg onm ouseover and out */ -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 { /* 3rd set of icons. Rotate them -360deg onm ouseover ONLY. Note where the "transition prop is added */ } 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); }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/4762
纯css3实现的圆形旋转分享按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。