效果如下：
也可以点击网址查看效果：http://keleyi.com/keleyi/phtml/html5/12.htm
请使用支持CSS3的浏览器访问本页面，获得更好效果。
源代码：
1 <style> 2 .keleyi-com-nav{ 3 width:520px; 4 height: 50px; 5 font:bold 0/50px Arial; 6 text-align:center; 7 margin:40px auto 0; 8 border-radius: 8px; 9 } 10 .keleyi-com-nav a{display: inline-block; 11 -webkit-transition: all 0.2s ease-in; 12 -moz-transition: all 0.2s ease-in; 13 -o-transition: all 0.2s ease-in; 14 -ms-transition: all 0.2s ease-in; 15 transition: all 0.2s ease-in; 16 } 17 .keleyi-com-nav a:hover{ 18 -webkit-transform:rotate(10deg); 19 -moz-transform:rotate(10deg); 20 -o-transform:rotate(10deg); 21 -ms-transform:rotate(10deg); 22 transform:rotate(10deg); 23 } 24 .black{ 25 background: #2c2c2c; 26 box-shadow: 0 7px 0 #0b0b0b; 27 } 28 .red{ 29 background: #f65f57; 30 box-shadow: 0 7px 0 #ba4a45; 31 } 32 .blue{ 33 background: #36b7e5; 34 box-shadow: 0 7px 0 #3595b8; 35 } 36 .green{ 37 background: #9cd564; 38 box-shadow: 0 7px 0 #86b65b; 39 } 40 .keleyi-com-nav li{ 41 position:relative; 42 display:inline-block; 43 padding:0 16px; 44 font-size: 13px; 45 text-shadow:1px 2px 4px rgba(0,0,0,.5); 46 list-style: none outside none; 47 } 48 49 .keleyi-com-nav li::before, 50 .keleyi-com-nav li::after{ 51 content:""; 52 position:absolute; 53 top:14px; 54 height: 25px; 55 width: 1px; 56 } 57 .keleyi-com-nav li::after{ 58 right: 0; 59 background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); 60 background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); 61 background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); 62 background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); 63 background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); 64 } 65 .black li::before{ 66 left: 0; 67 background: -moz-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c); 68 background: -webkit-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c); 69 background: -o-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c); 70 background: -ms-linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c); 71 background: linear-gradient(top, #2c2c2c, #000 50%, #2c2c2c); 72 } 73 .red li::before{ 74 left: 0; 75 background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); 76 background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); 77 background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); 78 background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); 79 background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); 80 } 81 .blue li::before{ 82 left: 0; 83 background: -moz-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc); 84 background: -webkit-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc); 85 background: -o-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc); 86 background: -ms-linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc); 87 background: linear-gradient(top, #34b0dc, #237a99 50%, #34b0dc); 88 } 89 .green li::before{ 90 left: 0; 91 background: -moz-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564); 92 background: -webkit-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564); 93 background: -o-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564); 94 background: -ms-linear-gradient(top, #9cd564, #7aa450 50%, #9cd564); 95 background: linear-gradient(top, #9cd564, #7aa450 50%, #9cd564); 96 } 97 .keleyi-com-nav li:first-child::before{ 98 background: none; 99 } 100 .keleyi-com-nav li:last-child::after{ 101 background: none; 102 } 103 104 .keleyi-com-nav a, 105 .keleyi-com-nav a:hover{ 106 color:#fff; 107 text-decoration: none; 108 } 109 </style> 110 <ul class="keleyi-com-nav black"> 111 <li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li> 112 <li><a href="http://keleyi.com/dev/36d87291ba370420.htm">About Me</a></li> 113 <li><a href="http://keleyi.com/dev/9c4dbaff0fca9c64.htm">Portfolio</a></li> 114 <li><a href="http://keleyi.com/a/bjac/k3pi4ehx.htm">Blog</a></li> 115 <li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li> 116 <li><a href="http://keleyi.com/game/1/">Contact Me</a></li> 117 </ul> 118 <ul class="keleyi-com-nav red"> 119 <li><a href="http://keleyi.com/">首页</a></li> 120 <li><a href="http://keleyi.com/ablut/">关于</a></li> 121 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li> 122 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li> 123 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li> 124 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> 125 </ul> 126 <ul class="keleyi-com-nav blue"> 127 <li><a href="http://keleyi.com/a/bjac/et551617.htm">Home</a></li> 128 <li><a href="http://keleyi.com/a/bjac/3wjq3xm2.htm">About Me</a></li> 129 <li><a href="http://keleyi.com/a/bjac/7slnymte.htm">Portfolio</a></li> 130 <li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">Blog</a></li> 131 <li><a href="http://keleyi.com/a/bjac/c07969353e71816f.htm">Resources</a></li> 132 <li><a href="http://keleyi.com/a/bjac/532bedbffca1affa.htm">Contact Me</a></li> 133 </ul> 134 <ul class="keleyi-com-nav green"> 135 <li><a href="http://keleyi.com/">首页</a></li> 136 <li><a href="http://keleyi.com/ablut/">关于</a></li> 137 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li> 138 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">导航样式</a></li> 139 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">侧边导航</a></li> 140 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">树形菜单</a></li> 141 </ul>
