css3实现简易dock

<style>

*{margin:0px; padding:0px;}

    #dock{width:100%; text-align:center; margin:0 auto; position:fixed;  bottom:0px; }

    #dock img{ transition:all 0.5s; width:98px; height:98px; border:0px; }

    #dock img:hover{transform:scale(1.5,1.5) translateY(-25px); -webkit-transform:scale(1.5,1.5) translateY(-30px); margin:0 10px; }

</style>

<div id="dock">

        <a href="#" ><img src="../Pictures/dock/alienware.png" /></a>

        <a href="#" ><img src="../Pictures/dock/alienware.png" /></a>

        <a href="#" ><img src="../Pictures/dock/alienware.png" /></a>

        <a href="#" ><img src="../Pictures/dock/alienware.png" /></a>

    </div>

就是那么简单，只要调一下 translateY 以及 margin的距离就好了