网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

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

用声音读出全文关注我吧
 2013/5/14 10:52:08 阅读次数:7231

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

社会化图标动画效果

 

浏览器支持：Firefox 4.0+  Safari3.1+  Opera10.5+  Chrome4.0+  IE10

四种效果分别使用了transform的：rotate, scale, translate来实现，三种可以单独使用也可以随意搭配。

rotate接受一个参数定义旋转的度数。

scale一个参数定义了水平和垂直的放大缩小的比例，如果是两个参数第一个是水平第二个是垂直。

translate两个参数第一个定义水平移动的距离，第二个定义垂直移动的距离。

首先是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);
}

完整的实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用CSS3为社会化图标添加动画效果</title>
<style>
.shareto1 a{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;}
.shareto1 a:hover{transform: rotate(360deg);  
         -webkit-transform: rotate(360deg);  
         -moz-transform: rotate(360deg);  
         -o-transform: rotate(360deg);  
         -ms-transform: rotate(360deg);}
.shareto2 a{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;}
.shareto2 a: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);}
.shareto3 a{ 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;}
.shareto3 a: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); }
.shareto4 a{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;}
.shareto4 a: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); }
</style>
</head>

<body>
<div class="shareto1"><div class="bshare-custom"><div class="bsPromo bsPromo2"></div><a href="javascript:void(0);" class="bshare-bsharesync" title="分享到一键通"></a><a href="javascript:void(0);" class="bshare-qqmb" title="分享到腾讯微博"></a><a href="javascript:void(0);" class="bshare-qzone" title="分享到QQ空间"></a><a href="javascript:void(0);" class="bshare-sinaminiblog" title="分享到新浪微博"></a><a href="javascript:void(0);" class="bshare-renren" title="分享到人人网"></a><a href="javascript:void(0);" class="bshare-neteasemb" title="分享到网易微博"></a><a href="javascript:void(0);" class="bshare-kaixin001" title="分享到开心网"></a><a class="bshare-more bshare-more-icon more-style-addthis" title="更多平台"></a><span class="BSHARE_COUNT bshare-share-count" style="float:none;">0</span></div></div>
<br /><br />
<div class="shareto2"><div class="bshare-custom"><div class="bsPromo bsPromo2"></div><a href="javascript:void(0);" class="bshare-bsharesync" title="分享到一键通"></a><a href="javascript:void(0);" class="bshare-qqmb" title="分享到腾讯微博"></a><a href="javascript:void(0);" class="bshare-qzone" title="分享到QQ空间"></a><a href="javascript:void(0);" class="bshare-sinaminiblog" title="分享到新浪微博"></a><a href="javascript:void(0);" class="bshare-renren" title="分享到人人网"></a><a href="javascript:void(0);" class="bshare-neteasemb" title="分享到网易微博"></a><a href="javascript:void(0);" class="bshare-kaixin001" title="分享到开心网"></a><a class="bshare-more bshare-more-icon more-style-addthis" title="更多平台"></a><span class="BSHARE_COUNT bshare-share-count" style="float:none;">0</span></div></div>
<br /><br />
<div class="shareto3"><div class="bshare-custom"><div class="bsPromo bsPromo2"></div><a href="javascript:void(0);" class="bshare-bsharesync" title="分享到一键通"></a><a href="javascript:void(0);" class="bshare-qqmb" title="分享到腾讯微博"></a><a href="javascript:void(0);" class="bshare-qzone" title="分享到QQ空间"></a><a href="javascript:void(0);" class="bshare-sinaminiblog" title="分享到新浪微博"></a><a href="javascript:void(0);" class="bshare-renren" title="分享到人人网"></a><a href="javascript:void(0);" class="bshare-neteasemb" title="分享到网易微博"></a><a href="javascript:void(0);" class="bshare-kaixin001" title="分享到开心网"></a><a class="bshare-more bshare-more-icon more-style-addthis" title="更多平台"></a><span class="BSHARE_COUNT bshare-share-count" style="float:none;">0</span></div></div>
<br /><br />
<div class="shareto4"><div class="bshare-custom"><div class="bsPromo bsPromo2"></div><a href="javascript:void(0);" class="bshare-bsharesync" title="分享到一键通"></a><a href="javascript:void(0);" class="bshare-qqmb" title="分享到腾讯微博"></a><a href="javascript:void(0);" class="bshare-qzone" title="分享到QQ空间"></a><a href="javascript:void(0);" class="bshare-sinaminiblog" title="分享到新浪微博"></a><a href="javascript:void(0);" class="bshare-renren" title="分享到人人网"></a><a href="javascript:void(0);" class="bshare-neteasemb" title="分享到网易微博"></a><a href="javascript:void(0);" class="bshare-kaixin001" title="分享到开心网"></a><a class="bshare-more bshare-more-icon more-style-addthis" title="更多平台"></a><span class="BSHARE_COUNT bshare-share-count" style="float:none;">0</span></div></div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=a31d0015-b4a9-46d6-8892-25ce733b939d&pophcol=2&lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<script type="text/javascript" charset="utf-8">
    bShare.addEntry({title:"使用CSS3为社会化图标添加动画效果",url:"http://www.ok22.org/art_detail.aspx?id=559",summary:" 很多博客和网站为了更好和阅读者沟通都会添加一些社会化图标，本篇文章将介绍如何使用CSS3translation属性为社会化图标添加一些简单的动画效果，教程中一共提供了四种不同的动画效果...-幸凡学习网^ω^查看更多》",pic:"http://www.tystudio.net/wp-content/uploads/2013/05/social-icons.png"});
</script>
</body>
</html>

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

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=559【使用CSS3为社会化图标添加动画效果】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)

相关文章

阅读全文内容关闭

copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010
粤ICP备13053249号-1谷歌地图