使用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两个参数第一个定义水平移动的距离,第二个定义垂直移动的距离。

 

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

标签