使用CSS3 Translation为社会化图标添加动画效果

很多博客和网站为了更好和阅读者沟通都会添加一些社会化图标，本篇文章将介绍如何使用CSS3 translation属性为社会化图标添加一些简单的动画效果，教程中一共提供了四种不同的动画效果。



在线演示 源码下载 浏览器支持：Firefox 4.0+ Safari3.1+ Opera10.5+ Chrome4.0+ IE10

首先是HTML

一个很简单的ul无序列表，每个li中包含一个span用来显示社会化图标。你可以把下面的javascript:void(0)换成自己的链接。
ul的class定义了图标的动画方式。教程中提到了四种不同的动画效果：spin, scale, scale-spin, translate你可以随意使用它们中的一个。

1 <ul class="spin">
2     <li><a href="javascript:void(0);"><span class="social-sinaweibo"></span></a></li>
3     <li><a href="javascript:void(0);"><span class="social-qqweibo"></span></a></li>
4     <li><a href="javascript:void(0);"><span class="social-sohuweibo"></span></a></li>
5     <li><a href="javascript:void(0);"><span class="social-wangyi"></span></a></li>
6     <li><a href="javascript:void(0);"><span class="social-renren"></span></a></li>
7     <li><a href="javascript:void(0);"><span class="social-rss"></span></a></li>
8 </ul>

基础CSS样式

这里是一些基础的ul样式，去掉浏览器默认样式。图标的高度是32x32px，使用float:left使图标水平显示。

1 ul {
 2     width: 260px;
 3     margin: 0 auto;
 4     list-style: none;
 5 }
 6  
 7     ul li {
 8         height: 32px;
 9         line-height: 32px;
10     }
11  
12     ul li {
13         float: left;
14     }

各个微博图标CSS样式

为了减少图片的请求次数，我们使用sprite技术。
首先是背景图片定义：

1 ul li a span {
2     margin-right: 10px;
3     background: url(../images/sprite-social.png) no-repeat top left;
4     display: block;
5     width: 32px;
6     height: 32px;
7     position: relative;
8 }

各个社会化图标sprite：

1 ul li a span.social-qqweibo {
 2     background-position: 0 0;
 3 }
 4  
 5 ul li a span.social-renren {
 6     background-position: -34px 0;
 7 }
 8  
 9 ul li a span.social-rss {
10     background-position: -68px 0;
11 }
12  
13 ul li a span.social-sinaweibo {
14     background-position: -102px 0;
15 }
16  
17 ul li a span.social-sohuweibo {
18     background-position: -136px 0;
19 }
20  
21 ul li a span.social-wangyi {
22     background-position: -170px 0;
23 }

效果一：360°旋转

1 ul.spin li a span {
 2         transition: All 0.4s ease-in-out;
 3         -webkit-transition: All 0.4s ease-in-out;
 4         -moz-transition: All 0.4s ease-in-out;
 5         -o-transition: All 0.4s ease-in-out;
 6     }
 7  
 8         ul.spin li a span:hover {
 9             transform: rotate(360deg);
10             -webkit-transform: rotate(360deg);
11             -moz-transform: rotate(360deg);
12             -o-transform: rotate(360deg);
13             -ms-transform: rotate(360deg);
14         }

效果二：放大

1 ul.scale li a span {
 2         transition: All 0.4s ease-in-out;
 3         -webkit-transition: All 0.4s ease-in-out;
 4         -moz-transition: All 0.4s ease-in-out;
 5         -o-transition: All 0.4s ease-in-out;
 6     }
 7  
 8         ul.scale li a span:hover {
 9             transform: scale(1.2);
10             -webkit-transform: scale(1.2);
11             -moz-transform: scale(1.2);
12             -o-transform: scale(1.2);
13             -ms-transform: scale(1.2);
14         }

效果三：旋转放大

1 ul.scale-spin li a span {
 2         transition: All 0.4s ease-in-out;
 3         -webkit-transition: All 0.4s ease-in-out;
 4         -moz-transition: All 0.4s ease-in-out;
 5         -o-transition: All 0.4s ease-in-out;
 6     }
 7  
 8         ul.scale-spin li a span:hover {
 9             transform: rotate(360deg) scale(1.2);
10             -webkit-transform: rotate(360deg) scale(1.2);
11             -moz-transform: rotate(360deg) scale(1.2);
12             -o-transform: rotate(360deg) scale(1.2);
13             -ms-transform: rotate(360deg) scale(1.2);
14         }

效果四：向上移动

1 ul.translate li a span {
 2         transition: All 0.4s ease-in-out;
 3         -webkit-transition: All 0.4s ease-in-out;
 4         -moz-transition: All 0.4s ease-in-out;
 5         -o-transition: All 0.4s ease-in-out;
 6     }
 7  
 8         ul.translate li a span:hover {
 9             transform: translate(0,-10px);
10             -webkit-transform: translate(0,-10px);
11             -moz-transform: translate(0,-10px);
12             -o-transform: translate(0,-10px);
13             -ms-transform: translate(0,-10px);
14         }

总结：

四种效果分别使用了transform的：rotate, scale, translate来实现，三种可以单独使用也可以随意搭配。
rotate接受一个参数定义旋转的度数。
scale一个参数定义了水平和垂直的放大缩小的比例，如果是两个参数第一个是水平第二个是垂直。
translate两个参数第一个定义水平移动的距离，第二个定义垂直移动的距离。

希望你喜欢本片文章，并对你有所帮助。