<html> <head> <meta charset="utf-8"> <title>jquery动画导航</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#nav li").stop().animate({'marginLeft':'-65px'},1000); $("li").hover(function(){ $(this).stop().animate({'marginLeft':'-2px'},500); },function(){ $(this).stop().animate({'marginLeft':'-65px'},500); }) }) </script> </head> <body> <ul id="nav"> <li class="li1"><span class="fa fa-mobile"></span></li> <li class="li2"><span class="fa fa-user-circle"></span></li> <li class="li3"><span class="fa fa-address-card-o"></span></li> <li class="li4"><span class="fa fa-snowflake-o"></span></li> <li class="li5"><span class="fa fa-podcast"></span></li> <li class="li6"><span class="fa fa-image"></span></li> </ul> </body> </html>
*{margin: 0px ; padding: 0px} ul{ list-style: none;} ul li{ text-align:center;width: 80px; height: 80px; margin: 15px 0 0 0; border:0px solid #ccc; line-height: 80px; border-top-right-radius: 10px;border-bottom-right-radius: 10px;} .li1{background: rgba(255,152,60,0.5)} .li2{background: rgba(59,75,255,0.5)} .li3{background: rgba(26,245,175,0.5)} .li4{background: rgba(232,33,185,0.5)} .li5{background: rgba(229,245,100,0.5)} .li6{background: rgba(240,147,15,0.5)} span{font-weight: 900;font-size: 100px;color: #fff;}
奇怪,为什么font awesome 通过font-size 跟 font-weight 调整不大呢?