分享按钮（QQ，微信，微博等）移入动画效果

ps：最近写的很多博客都是在以前在项目里写过的，之所以现在写出来，最大的目的就是希望自己以后用到的时候比较容易找，而且现在再写一遍，有助于加深印象！

很简单的效果，说先实现方式：

1.图标来自阿里巴巴矢量图标库没用过的可以试下，各式各样的图标，非常好用

2.初始每个分享框左右两侧都有一个隐藏的图标，和隐藏的文字

3.js操作鼠标移入时，图标和文字移动，将隐藏的显示，显示的隐藏

4.css3的transition

先看下效果吧：

1这是鼠标未移入时

2.鼠标移入（动画效果演示不了。。。）

代码如下：

css：

 @font-face {
            font-family: 'iconfont';  /* project id 219179 */
            src: url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.eot');
            src: url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.eot?#iefix') format('embedded-opentype'),
            url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.woff') format('woff'),
            url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.ttf') format('truetype'),
            url('http://at.alicdn.com/t/font_dh783vq4jh7rdx6r.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family:"iconfont" !important;
            font-size:16px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .servicesBox {
            width: 1000px;
            height: 270px;
            margin: 0 auto;
            clear: both;
            line-height: 18px;
            color: #999999;
            font-size: 12px;
        }
        .servicesBox .serBox {
            cursor: pointer;
            border: 1px solid #fff;
            display: inline;
            width: 100px;
            height: 135px;
            float: left;
            overflow: hidden;
            background-color: #f7f7f7;
            position: relative;
        }
        .servicesBox .serBoxOn {
            font-family: "微软雅黑";
            opacity:0;
            width: 100px;
            height: 135px;
            background: #f48080;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 19;
            transition:all linear 0.5s;
        }
        .servicesBox .serBox .pic1 {
            width: 100px;
            height: 100px;
            text-align: center;
            position: absolute;
            top: 43px;
            z-index: 99;
            transition:all linear 0.25s;
            left: 0px;
        }
        .servicesBox .serBox .pic2 {
            width: 100px;
            height: 100px;
            text-align: center;
            position: absolute;
            top: 43px;
            left: -100px;
            z-index: 99;
            transition:all linear 0.25s;
        }
        .servicesBox .serBox .pic2 i{
            color:#fff;
        }
        .servicesBox .serBox .txt2 {
            width: 100px;
            height: 30px;
            color: #fff;
            position: absolute;
            top: 97px;
            left:100px;
            z-index: 99;
            transition:all linear 0.25s;
        }
        .servicesBox .serBox .txt1 {
            width: 100px;
            height: 30px;
            color: #999999;
            position: absolute;
            top: 97px;
            left: 0px;
            z-index: 99;
            transition:all linear 0.25s;
        }
        .servicesBox .serBox .txt1 .tit {
            color: #666;
            line-height: 30px;
        }
        .servicesBox .serBox span.tit {
            font-size: 16px;
            display: block;
            text-align: center;
        }

        .servicesBox .serBox .txt2 .tit{
            color:#fff;
            line-height: 30px;
            font-weight:bold;
        }
        .servicesBox .serBox p {
            padding: 0 10px;
            text-align: center;
        }
        .serBox i{
            font-size:75px;
        }
        .serBox:hover .serBoxOn{
            opacity: 1;
        }

html

<div class="servicesBox">
    <div class="serBox">

        <div class="serBoxOn"></div>

        <div class="pic1" >   <i class="iconfont">&#xe8b1;</i> </div>

        <div class="pic2">   <i class="iconfont">&#xe8b1;</i> </div>

        <div class="txt1"> <span class="tit">QQ</span></div>

        <div class="txt2"><span class="tit">QQ</span></div>

    </div>
    <div class="serBox">

        <div class="serBoxOn"></div>

        <div class="pic1" >   <i class="iconfont">&#xe61e;</i> </div>

        <div class="pic2" >   <i class="iconfont">&#xe61e;</i> </div>

        <div class="txt1" > <span class="tit">微博</span></div>

        <div class="txt2" ><span class="tit">微博</span></div>

    </div>
    <div class="serBox">

        <div class="serBoxOn"></div>

        <div class="pic1" >   <i class="iconfont">&#xe60a;</i> </div>

        <div class="pic2" >   <i class="iconfont">&#xe60a;</i> </div>

        <div class="txt1" > <span class="tit">微信</span></div>

        <div class="txt2" ><span class="tit">微信</span></div>

    </div>
</div>

js:

 $(".serBox").mouseover(function(){
       $(this).children(".pic1").css("left","100px")
       $(this).children(".pic2").css("left","0")
        $(this).children(".txt1").css("left","-100px")
       $(this).children(".txt2").css("left","0")
    })
    $(".serBox").mouseout(function(){
        $(this).children(".pic1").css("left","0");
       $(this).children(".pic2").css("left","100px")
        $(this).children(".txt1").css("left","0")
        $(this).children(".txt2").css("left","-100px")
    })

分享按钮（QQ，微信，微博等）移入动画效果

推荐阅读