码迷,mamicode.com
首页 > Web开发 > 详细

css3实现简易dock

时间:2014-05-08 18:12:58      阅读:443      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

bubuko.com,布布扣
<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>
bubuko.com,布布扣

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

css3实现简易dock,布布扣,bubuko.com

css3实现简易dock

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/hualongbei/p/3715551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!