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

 

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



2 评论

  1. 艾丝凡到家了   •  

    太棒了

艾丝凡到家了进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>