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

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

分类儿

页面儿

搜索儿

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

利用css3制作图标旋转效果

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

首先,体验一下效果: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