很多博客和网站为了更好和阅读者沟通都会添加一些社会化图标，本篇文章将介绍如何使用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你可以随意使用它们中的一个。
- <ul class="spin">
- <li><a href="javascript:void(0);"><span class="social-sinaweibo"></span></a></li>
- <li><a href="javascript:void(0);"><span class="social-qqweibo"></span></a></li>
- <li><a href="javascript:void(0);"><span class="social-sohuweibo"></span></a></li>
- <li><a href="javascript:void(0);"><span class="social-wangyi"></span></a></li>
- <li><a href="javascript:void(0);"><span class="social-renren"></span></a></li>
- <li><a href="javascript:void(0);"><span class="social-rss"></span></a></li>
- </ul>
基础CSS样式
这里是一些基础的ul样式，去掉浏览器默认样式。图标的高度是32x32px，使用float:left使图标水平显示。
- ul {
- width: 260px;
- margin: 0 auto;
- list-style: none;
- }
- ul li {
- height: 32px;
- line-height: 32px;
- }
- ul li {
- float: left;
- }
各个微博图标CSS样式
为了减少图片的请求次数，我们使用sprite技术。
首先是背景图片定义：
- ul li a span {
- margin-right: 10px;
- background: url(../images/sprite-social.png) no-repeat top left;
- display: block;
- width: 32px;
- height: 32px;
- position: relative;
- }
各个社会化图标sprite：
- ul li a span.social-qqweibo {
- background-position: 0 0;
- }
- ul li a span.social-renren {
- background-position: -34px 0;
- }
- ul li a span.social-rss {
- background-position: -68px 0;
- }
- ul li a span.social-sinaweibo {
- background-position: -102px 0;
- }
- ul li a span.social-sohuweibo {
- background-position: -136px 0;
- }
- ul li a span.social-wangyi {
- background-position: -170px 0;
- }
效果一：360°旋转
- ul.spin li a span {
- transition: All 0.4s ease-in-out;
- -webkit-transition: All 0.4s ease-in-out;
- -moz-transition: All 0.4s ease-in-out;
- -o-transition: All 0.4s ease-in-out;
- }
- ul.spin li a span:hover {
- transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- }
效果二：放大
- ul.scale li a span {
- transition: All 0.4s ease-in-out;
- -webkit-transition: All 0.4s ease-in-out;
- -moz-transition: All 0.4s ease-in-out;
- -o-transition: All 0.4s ease-in-out;
- }
- ul.scale li a span:hover {
- transform: scale(1.2);
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -o-transform: scale(1.2);
- -ms-transform: scale(1.2);
- }
效果三：旋转放大
- ul.scale-spin li a span {
- transition: All 0.4s ease-in-out;
- -webkit-transition: All 0.4s ease-in-out;
- -moz-transition: All 0.4s ease-in-out;
- -o-transition: All 0.4s ease-in-out;
- }
- ul.scale-spin li a span:hover {
- transform: rotate(360deg) scale(1.2);
- -webkit-transform: rotate(360deg) scale(1.2);
- -moz-transform: rotate(360deg) scale(1.2);
- -o-transform: rotate(360deg) scale(1.2);
- -ms-transform: rotate(360deg) scale(1.2);
- }
效果四：向上移动
- ul.translate li a span {
- transition: All 0.4s ease-in-out;
- -webkit-transition: All 0.4s ease-in-out;
- -moz-transition: All 0.4s ease-in-out;
- -o-transition: All 0.4s ease-in-out;
- }
- ul.translate li a span:hover {
- transform: translate(0,-10px);
- -webkit-transform: translate(0,-10px);
- -moz-transform: translate(0,-10px);
- -o-transform: translate(0,-10px);
- -ms-transform: translate(0,-10px);
- }
总结：
四种效果分别使用了transform的：rotate, scale, translate来实现，三种可以单独使用也可以随意搭配。
rotate接受一个参数定义旋转的度数。
scale一个参数定义了水平和垂直的放大缩小的比例，如果是两个参数第一个是水平第二个是垂直。
translate两个参数第一个定义水平移动的距离，第二个定义垂直移动的距离。
希望你喜欢本片文章，并对你有所帮助。
太棒了
这个很有实用性啊