今天小编跟大家讲解下有关使用css3制作动感导航条示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用css3制作动感导航条示例 的相关资料，希望小伙伴们看了有所帮助。
越来越喜欢CSS3的Transition属性 HTML:
复制代码代码如下:<div class="nav"> <li><a href="">HOME</a></li> <li><a href="">LIFE</a></li> <li><a href="">WEB</a></li> <li><a href="">PHP</a></li> <li><a href="">PIC</a></li> <li><a href="">about</a></li></div>
CSS:
复制代码代码如下:<style>body{ background:#EDEDED;}</p><p>.nav{ width:606px; margin:100px auto 0 auto;}</p><p>li{ width:100px; height:30px; list-style:none; float:left; margin-left:-1px;</p><p> line-height:26px; text-align:center; letter-spacing:3px;</p><p> border:1px solid #B2B2B2; border-radius:3px;</p><p> -webkit-box-shadow:0 1px 2px #CDCDCD; box-shadow:0 1px 2px #CDCDCD;</p><p> -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;}</p><p>a{ width:96px; height:28px; display:inline-block;</p><p> color:#999; font-size:10px; font-family:Verdana,sans-serif; text-decoration:none;</p><p> -webkit-text-size-adjust:none; border:2px solid #FFF; border-bottom:none; border-radius:3px;</p><p> background:-webkit-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%); background:-moz-linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%); background:linear-gradient( top,#FFFFFF 20%,#F3F3F3 85%,#E5E5E5 100%);}</p><p>li:hover{ margin-top:-8px;}</p><p>a:hover{ color:#777;}</style>
来源：爱蒂网
