热搜： Python 编程 PHP vue dedecms

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

发布时间：2023-01-20 14:43:29 来源：网络

.

梅林枝繁叶茂，一派生机盎然。日光暖暖融融地照耀下来，铺满了一地金黄。那抹夕阳下，你永远是最美的风景。

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

源码下载

看下实现代码：

html代码：

复制代码

代码如下:

360 degree spin onMouseover and onMouseout

<a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>


60 degree spin onMouseover and onMouseout

<a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>


-360 degree spin onMouseover ONLY

<a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a rel="nofollow noopener noreferrer" href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>

css代码：

复制代码

代码如下:

p#socialicons img
{
/* 1st set of icons. Rotate them 360deg onmouseover 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 onmouseover 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 onmouseover 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);
}

到此这篇关于一款纯css3如何实现的圆形旋转分享按钮旋转角度可自己调整就介绍到这了。心者，栖神之舍；神者，知识之本；思者，神识之妙用也。更多相关一款纯css3如何实现的圆形旋转分享按钮旋转角度可自己调整内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签：