很多博客和网站为了更好和阅读者沟通都会添加一些社会化图标,本篇文章将介绍如何使用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两个参数第一个定义水平移动的距离,第二个定义垂直移动的距离。
希望你喜欢本片文章,并对你有所帮助。
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>