分享按钮（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:  auto;

            clear: both;

            line-height: 18px;

            color: #;

            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:;

            width: 100px;

            height: 135px;

            background: #f48080;

            position: absolute;

            left: 0px;

            top: 0px;

            z-index: ;

            transition:all linear .5s;

        }

        .servicesBox .serBox .pic1 {

            width: 100px;

            height: 100px;

            text-align: center;

            position: absolute;

            top: 43px;

            z-index: ;

            transition:all linear .25s;

            left: 0px;

        }

        .servicesBox .serBox .pic2 {

            width: 100px;

            height: 100px;

            text-align: center;

            position: absolute;

            top: 43px;

            left: -100px;

            z-index: ;

            transition:all linear .25s;

        }

        .servicesBox .serBox .pic2 i{

            color:#fff;

        }

        .servicesBox .serBox .txt2 {

            width: 100px;

            height: 30px;

            color: #fff;

            position: absolute;

            top: 97px;

            left:100px;

            z-index: ;

            transition:all linear .25s;

        }

        .servicesBox .serBox .txt1 {

            width: 100px;

            height: 30px;

            color: #;

            position: absolute;

            top: 97px;

            left: 0px;

            z-index: ;

            transition:all linear .25s;

        }

        .servicesBox .serBox .txt1 .tit {

            color: #;

            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:  10px;

            text-align: center;

        }

        .serBox i{

            font-size:75px;

        }

        .serBox:hover .serBoxOn{

            opacity: ;

        }

html

<div class="servicesBox">

    <div class="serBox">

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

        <div class="pic1" >   <i class="iconfont"></i> </div>

        <div class="pic2">   <i class="iconfont"></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"></i> </div>

        <div class="pic2" >   <i class="iconfont"></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"></i> </div>

        <div class="pic2" >   <i class="iconfont"></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","")

        $(this).children(".txt1").css("left","-100px")

       $(this).children(".txt2").css("left","")

    })

    $(".serBox").mouseout(function(){

        $(this).children(".pic1").css("left","");

       $(this).children(".pic2").css("left","100px")

        $(this).children(".txt1").css("left","")

        $(this).children(".txt2").css("left","-100px")

    })

巴特西

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

最新文章

热门文章