CSS3图片旋转特效(360/60/-360度)_ Div+Css教程-查字典教程网
CSS3图片旋转特效(360/60/-360度)
CSS3图片旋转特效(360/60/-360度)
发布时间:2017-01-07 来源:查字典编辑
摘要:由于没法展示效果只是截了个图下面是实现代码:p#socialiconsimg{/*1stsetoficons.Rotatethem360de...

由于没法展示效果只是截了个图

下面是实现代码:

<style>

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);

}

</style>

<b>360度旋转 onmouseover和onmouseout</b></p>

<p id="socialicons">

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" _fcksavedurl=""http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>

</p>

<p><b>60度旋转 onMouseover and onMouseout</b></p>

<p id="socialicons2">

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>

</p>

<p><b>-360度旋转 onMouseover</b></p>

<p id="socialicons3">

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>

<a href="#">

<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>

</p>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类