纯CSS3带动画效果导航菜单

随着互联网的发展，网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页，到后来的表格布局，再到div+css模式，现在发展到了html+css3。网页能表达的东西越来越多，css3兴起已经很多年了，不多由于国内网站要求对IE的兼容，html5+css3的发展很缓慢。

html5+css3的出现给前端开发者提供了更多的可能性，以前很多只能通过JS实现的效果用纯粹的css3就能实现了。

下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单。

下面是效果图：

 

查看示例（请在支持css3的浏览器中查看效果，最新版的chrome浏览器下效果最佳。）

   纯css动画导航菜单   下载 (27.9 KB, 1 次)

特别声明此demo为博主原创，可以下载免费使用。

话不多说，直接贴源码：

css:

 *{
     margin:0;
     padding:0;
 }

 html{
     background: #333d43;

 }
 footer a{
     color:#fff;
     text-decoration:none;
 }
 footer a:hover{
     text-decoration:underline;
     }
 body{
     min-height:500px;
     font:14px/1.3 'Microsoft YaHei';
     color:#888;
     padding:10px;
 }
 nav{
     position:relative;
     border-radius:5px;
     display:block;
     margin: 30px auto 0;
     width:800px;
     background:#fff;
     border-radius:5px;
     box-shadow: 1px 1px 33px #fff;
     }
 .homeIcon{
     position:relative;
     display:block;
     width:50px;
     height:40px;
     }
 #home:hover > a .home-top{
     border-bottom:10px #fff solid;
     }
 #home:hover > a .home-top-r{
     background:#fff;
     }
 #home:hover > a .home-door-l{
     background:#fff;
     }
 #home:hover > a .home-door-r{
     background:#fff;
     }
 .home-top{
     position:absolute;
     left:15px;
     top:0px;
     border-left:10px transparent solid;
     border-right:10px transparent solid;
     border-top:10px transparent solid;
     border-bottom:10px #C2C2C2 solid;
     box-shadow: 0px 1px 0px #000;
     width:0px;
     height:0px;
     }
 .home-top-r{
     position:absolute;
     left:27px;
     top:13px;
     width:4px;
     height:6px;
     background:#C2C2C2;
     }
 .home-door-l{
     position:absolute;
     left:18px;
     top:20px;
     width:5px;
     height:6px;
     background:#C2C2C2;
     }
 .home-door-r{
     position:absolute;
     left:27px;
     top:20px;
     width:5px;
     height:6px;
     background:#C2C2C2;
     }
 .fancyNav{
     display:block;
     position:relative;
     border-radius:5px;
     background-image: linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
     background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
     background-image: -moz-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
     background-image: -o-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
     background-image: -ms-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);   }
 .fancyNav li{
     position:relative;

     height:40px;
     line-height:40px;
     padding:0px 20px;
     display:block;
     float:left;
     border-right:1px #000 solid;
     }
 .fancyNav li:hover{
     background:rgba(10, 5, 5, 0.2);
         }
 .fancyNav li ul{
     position:absolute;
     display:none;
     left:0px;
     overflow:hidden;
     }
 .fancyNav li:hover>ul{
     display:block;
     animation:animated .5s ease 0s 1 alternate;
     -webkit-animation:animated .5s ease 0s 1 alternate;
     -moz-animation:animated .5s ease 0s 1 alternate;
     -ms-animation:animated .5s ease 0s 1 alternate;
     -o-animation:animated .5s ease 0s 1 alternate;}
 @keyframes animated
     {
     0%      {transform: rotate(0deg);opacity:0;}
     100%    {transform: rotate(-360deg);opacity:1;}
     }
 @-webkit-keyframes animated
     {
     0%      {-webkit-transform: rotate(0deg);opacity:0;}
     100%    {-webkit-transform: rotate(-360deg);opacity:1;}
     }
 @-moz-keyframes animated
     {
     0%      {-moz-transform: rotate(0deg);opacity:0;}
     100%    {-moz-transform: rotate(-360deg);opacity:1;}
     }
 @-o-keyframes animated
     {
     0%      {-o-transform: rotate(0deg);opacity:0;}
     100%    {-o-transform: rotate(-360deg);opacity:1;}
     }
 @-ms-keyframes animated
     {
     0%      {-ms-transform: rotate(0deg);opacity:0;}
     100%    {-ms-transform: rotate(-360deg);opacity:1;}
     }
 .fancyNav li ul li
 {
     display:block;
     margin:0px;
     border-top: 1px solid #989898;
     border-bottom: 1px solid #343434;
     background:rgba(10, 5, 5, 0.45);
     height:30px;
     line-height:30px;
     width:60px;
 }
 .fancyNav li ul li:hover{
     background:rgba(10, 5, 5, 0.9);
     }
 li a{
     color:#fff;
     text-decoration:none;
     text-shadow: 0px 1px 0px #000
     }
 input[type=search] {
 -webkit-appearance: none;
 outline: none;
 }
 #searchform {
 position: absolute;
 rightright: 10px;
 bottombottom: 6px;
 z-index: 100;
 width: 160px;
 }
 #searchform #s {
 outline:none;
 width: 80px;
 float: rightright;
 background: #fff;
 border: none;
 padding: 6px 10px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-transition: width .7s;
 -moz-transition: width .7s;
 transition: width .7s;
 }
 #searchform #s:focus {
 width: 150px;
 }
 footer {
 margin-top:400px;
 color: #BBBBBB;
 font-size: 15px;
 line-height: 1.6;
 padding: 60px 20px 0;
 text-align: center;
 display: block;
 }

html:

         "utf-8" />

         CSS3 Animated Navigation Menu | Tutorialzine Demo


         "stylesheet" href="assets/css/styles.css" />


         "stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />






            "searchform">
             "search" id="s" placeholder="Search">


             class="fancyNav">
                 "home">"#home" class="homeIcon">class="home-top">

class="home-top-r">

class="home-door-l">

class="home-door-r">

  

                "news">"#news">前端设计   

                

  
•                 
• "">HTML5
  
•                 
• "">CSS3
  
•                 
• "">JQUERY
  
•                 

  

                

  

                "about">"#about">编程语言   

                                

  
•                 
• "">PHP
  
•                 
• "">JAVA
  
•                 
• "">wordpress
  
•                 
• "">CodeIgniter
  
•                 

  

  

                

  

                "services">"#services">生活   

           

  

                

  

                "contact">"#contact">留言板   

  

                

  

            "searchform">   

            "search" id="s" placeholder="Search">   

               

            "display:block;clear:both;">

  

               

           

  

       

Tutorial by   "http://bloglaotou.duapp.com" target="_blank">sanyecao  ©2013