`

纯CSS3带动画效果导航菜单

css3纯css二级菜单导航菜单动画 
阅读更多

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

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

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

下面是效果图：

pure-css3-animated-navigation

 

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

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

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

话不多说，直接贴源码：

css:

 
  1. *{   
  2.     margin:0;   
  3.     padding:0;   
  4. }   
  5.   
  6. html{   
  7.     background: #333d43;   
  8.        
  9. }   
  10. footer a{   
  11.     color:#fff;   
  12.     text-decoration:none;   
  13. }   
  14. footer a:hover{   
  15.     text-decoration:underline;   
  16.     }   
  17. body{   
  18.     min-height:500px;   
  19.     font:14px/1.3 'Microsoft YaHei';   
  20.     color:#888;   
  21.     padding:10px;   
  22. }   
  23. nav{   
  24.     position:relative;   
  25.     border-radius:5px;   
  26.     display:block;   
  27.     margin: 30px auto 0;   
  28.     width:800px;   
  29.     background:#fff;   
  30.     border-radius:5px;   
  31.     box-shadow: 1px 1px 33px #fff;   
  32.     }   
  33. .homeIcon{   
  34.     position:relative;   
  35.     display:block;   
  36.     width:50px;   
  37.     height:40px;   
  38.     }   
  39. #home:hover > a .home-top{   
  40.     border-bottom:10px #fff solid;   
  41.     }      
  42. #home:hover > a .home-top-r{   
  43.     background:#fff;   
  44.     }   
  45. #home:hover > a .home-door-l{   
  46.     background:#fff;   
  47.     }   
  48. #home:hover > a .home-door-r{   
  49.     background:#fff;   
  50.     }              
  51. .home-top{   
  52.     position:absolute;   
  53.     left:15px;   
  54.     top:0px;   
  55.     border-left:10px transparent solid;   
  56.     border-right:10px transparent solid;   
  57.     border-top:10px transparent solid;   
  58.     border-bottom:10px #C2C2C2 solid;   
  59.     box-shadow: 0px 1px 0px #000;   
  60.     width:0px;   
  61.     height:0px;    
  62.     }      
  63. .home-top-r{   
  64.     position:absolute;   
  65.     left:27px;   
  66.     top:13px;   
  67.     width:4px;   
  68.     height:6px;   
  69.     background:#C2C2C2;   
  70.     }   
  71. .home-door-l{   
  72.     position:absolute;   
  73.     left:18px;   
  74.     top:20px;   
  75.     width:5px;   
  76.     height:6px;   
  77.     background:#C2C2C2;   
  78.     }   
  79. .home-door-r{   
  80.     position:absolute;   
  81.     left:27px;   
  82.     top:20px;   
  83.     width:5px;   
  84.     height:6px;   
  85.     background:#C2C2C2;   
  86.     }              
  87. .fancyNav{   
  88.     display:block;   
  89.     position:relative;   
  90.     border-radius:5px;   
  91.     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%);   
  92.     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%);   
  93.     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%);   
  94.     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%);   
  95.     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%);   }   
  96. .fancyNav li{   
  97.     position:relative;   
  98.   
  99.     height:40px;   
  100.     line-height:40px;   
  101.     padding:0px 20px;   
  102.     display:block;   
  103.     float:left;   
  104.     border-right:1px #000 solid;   
  105.     }   
  106. .fancyNav li:hover{   
  107.     background:rgba(10, 5, 5, 0.2);   
  108.         }      
  109. .fancyNav li ul{   
  110.     position:absolute;   
  111.     display:none;   
  112.     left:0px;   
  113.     overflow:hidden;   
  114.     }   
  115. .fancyNav li:hover>ul{   
  116.     display:block;   
  117.     animation:animated .5s ease 0s 1 alternate;   
  118.     -webkit-animation:animated .5s ease 0s 1 alternate;   
  119.     -moz-animation:animated .5s ease 0s 1 alternate;   
  120.     -ms-animation:animated .5s ease 0s 1 alternate;    
  121.     -o-animation:animated .5s ease 0s 1 alternate;}   
  122. @keyframes animated   
  123.     {   
  124.     0%      {transform: rotate(0deg);opacity:0;}   
  125.     100%    {transform: rotate(-360deg);opacity:1;}   
  126.     }   
  127. @-webkit-keyframes animated   
  128.     {   
  129.     0%      {-webkit-transform: rotate(0deg);opacity:0;}   
  130.     100%    {-webkit-transform: rotate(-360deg);opacity:1;}   
  131.     }   
  132. @-moz-keyframes animated   
  133.     {   
  134.     0%      {-moz-transform: rotate(0deg);opacity:0;}   
  135.     100%    {-moz-transform: rotate(-360deg);opacity:1;}   
  136.     }   
  137. @-o-keyframes animated   
  138.     {   
  139.     0%      {-o-transform: rotate(0deg);opacity:0;}   
  140.     100%    {-o-transform: rotate(-360deg);opacity:1;}   
  141.     }   
  142. @-ms-keyframes animated   
  143.     {   
  144.     0%      {-ms-transform: rotate(0deg);opacity:0;}   
  145.     100%    {-ms-transform: rotate(-360deg);opacity:1;}   
  146.     }   
  147. .fancyNav li ul li   
  148. {   
  149.     display:block;   
  150.     margin:0px;   
  151.     border-top: 1px solid #989898;   
  152.     border-bottom: 1px solid #343434;   
  153.     background:rgba(10, 5, 5, 0.45);   
  154.     height:30px;   
  155.     line-height:30px;   
  156.     width:60px;   
  157. }      
  158. .fancyNav li ul li:hover{   
  159.     background:rgba(10, 5, 5, 0.9);   
  160.     }   
  161. li a{   
  162.     color:#fff;   
  163.     text-decoration:none;   
  164.     text-shadow: 0px 1px 0px #000  
  165.     }   
  166. input[type=search] {   
  167. -webkit-appearance: none;   
  168. outline: none;   
  169. }   
  170. #searchform {   
  171. position: absolute;   
  172. rightright: 10px;   
  173. bottombottom: 6px;   
  174. z-index: 100;   
  175. width: 160px;   
  176. }   
  177. #searchform #s {   
  178. outline:none;              
  179. width: 80px;   
  180. float: rightright;   
  181. background: #fff;   
  182. border: none;   
  183. padding: 6px 10px;   
  184. -webkit-border-radius: 5px;   
  185. -moz-border-radius: 5px;   
  186. border-radius: 5px;   
  187. -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);   
  188. -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);   
  189. box-shadow: inset 0 1px 2px rgba(0,0,0,.2);   
  190. -webkit-transition: width .7s;   
  191. -moz-transition: width .7s;   
  192. transition: width .7s;   
  193. }   
  194. #searchform #s:focus {   
  195. width: 150px;   
  196. }   
  197. footer {   
  198. margin-top:400px;      
  199. color: #BBBBBB;   
  200. font-size: 15px;   
  201. line-height: 1.6;   
  202. padding: 60px 20px 0;   
  203. text-align: center;   
  204. display: block;   
  205. }  

html:

 
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <meta charset="utf-8" />   
  5.            
  6.         <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>   
  7.            
  8.         <!-- Our CSS stylesheet file -->   
  9.         <link rel="stylesheet" href="assets/css/styles.css" />   
  10.            
  11.         <!-- Including the Lobster font from Google's Font Directory -->   
  12.         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />   
  13.            
  14.         <!-- Enabling HTML5 support for Internet Explorer -->   
  15.         <!--[if lt IE 9]>   
  16.           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>   
  17.         <![endif]-->   
  18.     </head>   
  19.        
  20.     <body>   
  21.            <form id="searchform">   
  22.             <input type="search" id="s" placeholder="Search">   
  23.             </form>   
  24.         <nav>   
  25.             <ul class="fancyNav">   
  26.                 <li id="home"><a href="#home" class="homeIcon"><div class="home-top"></div><div class="home-top-r"></div><div class="home-door-l"></div><div class="home-door-r"></div></a></li>   
  27.                 <li id="news"><a href="#news">前端设计</a>   
  28.                 <ul>   
  29.                 <li><a href="">HTML5</a></li>   
  30.                 <li><a href="">CSS3</a></li>   
  31.                 <li><a href="">JQUERY</a></li>   
  32.                 </ul>   
  33.                 </li>   
  34.                 <li id="about"><a href="#about">编程语言</a>   
  35.                                 <ul>   
  36.                 <li><a href="">PHP</a></li>   
  37.                 <li><a href="">JAVA</a></li>   
  38.                 <li><a href="">wordpress</a></li>   
  39.                 <li><a href="">CodeIgniter</a></li>   
  40.                 </ul>   
  41.   
  42.                 </li>   
  43.                 <li id="services"><a href="#services">生活</a>   
  44.            
  45.   
  46.                 </li>   
  47.                 <li id="contact"><a href="#contact">留言板</a>   
  48.   
  49.                 </li>   
  50.             <form id="searchform">   
  51.             <input type="search" id="s" placeholder="Search">   
  52.             </form>   
  53.             <div style="display:block;clear:both;"></div>   
  54.             </ul>   
  55.         </nav>   
  56.   
  57.        <footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013</footer>        
  58.     </body>   
  59. </html>  
分享到：
| 纯css写的仿真图书翻页效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics