前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 技巧应用,前端集合 » 利用css3制作图标旋转效果

利用css3制作图标旋转效果

发布者:前端集合 // 发布时间:2011-06-06 21:14:58 // 分类:技巧应用,前端集合 // 访问: 970 次 // 热度: 0人参与

首先,体验一下效果:View demo

1. HTML

<ul id="social" class="group">
<li class="twitter"><a href="http://twitter.com/tkenny"><span></span>twitter</a></li>
<li class="dribbble"><a href="http://dribbble.com/tkenny"><span></span>dribbble</a></li>
<li class="lastfm"><a href="http://www.last.fm/user/KennySim"><span></span>last.fm</a></li>
<li class="spotify"><a href="http://open.spotify.com/user/tkenny"><span></span>Spotify</a></li>
<li class="ember"><a href="http://emberapp.com/tkenny/"><span></span>ember</a></li>
<li class="inspectelement"><a href="http://inspectelement.com"><span></span>Inspect Element</a></li>
</ul>

2.CSS

li a span {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
VIA

Tags: css3, 图标旋转效果

有关本博主题>>  << 周星星&mdash;&mdash;你不是真的快乐
Top