基于CSS3制作立体效果导航菜单

(编辑：jimmy 日期: 2024/11/15 浏览：2)

先给大家展示效果图，效果如下：

基于CSS3制作立体效果导航菜单


友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。

源代码：
CSS Code复制内容到剪贴板
  1. <style>    
  2. .keleyi-com-nav{    
  3. width:px;    
  4. height: px;    
  5. font:bold /px Arial;    
  6. text-align:center;    
  7. margin:px auto ;    
  8. border-radius: px;    
  9. }    
  10. .keleyi-com-nav a{display: inline-block;    
  11. -webkit-transition: all .s ease-in;    
  12. -moz-transition: all .s ease-in;    
  13. -o-transition: all .s ease-in;    
  14. -ms-transition: all .s ease-in;    
  15. transition: all .s ease-in;    
  16. }    
  17. .keleyi-com-nav a:hover{    
  18. -webkit-transform:rotate(deg);    
  19. -moz-transform:rotate(deg);    
  20. -o-transform:rotate(deg);    
  21. -ms-transform:rotate(deg);    
  22. transform:rotate(deg);    
  23. }    
  24. .black{    
  25. background: #ccc;    
  26. box-shadow: px #bbb;    
  27. }    
  28. .red{    
  29. background: #ff;    
  30. box-shadow: px #baa;    
  31. }    
  32. .blue{    
  33. background: #be;    
  34. box-shadow: px #b;    
  35. }    
  36. .green{    
  37. background: #cd;    
  38. box-shadow: px #bb;    
  39. }    
  40. .keleyi-com-nav li{    
  41. position:relative;    
  42. display:inline-block;    
  43. padding: px;    
  44. font-size: px;    
  45. text-shadow:px px px rgba(,,,.);    
  46. list-style: none outside none;    
  47. }    
  48. .keleyi-com-nav li::before,    
  49. .keleyi-com-nav li::after{    
  50. content:"";    
  51. position:absolute;    
  52. top:px;    
  53. height: px;    
  54. width: px;    
  55. }    
  56. .keleyi-com-nav li::after{    
  57. rightright: ;    
  58. background: -moz-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));    
  59. background: -webkit-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));    
  60. background: -o-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));    
  61. background: -ms-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));    
  62. background: linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));    
  63. }    
  64. .black li::before{    
  65. left: ;    
  66. background: -moz-linear-gradient(top, #ccc, # %, #ccc);    
  67. background: -webkit-linear-gradient(top, #ccc, # %, #ccc);    
  68. background: -o-linear-gradient(top, #ccc, # %, #ccc);    
  69. background: -ms-linear-gradient(top, #ccc, # %, #ccc);    
  70. background: linear-gradient(top, #ccc, # %, #ccc);    
  71. }    
  72. .red li::before{    
  73. left: ;    
  74. background: -moz-linear-gradient(top, #ffa, #eea %, #ffa);    
  75. background: -webkit-linear-gradient(top, #ffa, #eea %, #ffa);    
  76. background: -o-linear-gradient(top, #ffa, #eea %, #ffa);    
  77. background: -ms-linear-gradient(top, #ffa, #eea %, #ffa);    
  78. background: linear-gradient(top, #ffa, #eea %, #ffa);    
  79. }    
  80. .blue li::before{    
  81. left: ;    
  82. background: -moz-linear-gradient(top, #bdc, #a %, #bdc);    
  83. background: -webkit-linear-gradient(top, #bdc, #a %, #bdc);    
  84. background: -o-linear-gradient(top, #bdc, #a %, #bdc);    
  85. background: -ms-linear-gradient(top, #bdc, #a %, #bdc);    
  86. background: linear-gradient(top, #bdc, #a %, #bdc);    
  87. }    
  88. .green li::before{    
  89. left: ;    
  90. background: -moz-linear-gradient(top, #cd, #aa %, #cd);    
  91. background: -webkit-linear-gradient(top, #cd, #aa %, #cd);    
  92. background: -o-linear-gradient(top, #cd, #aa %, #cd);    
  93. background: -ms-linear-gradient(top, #cd, #aa %, #cd);    
  94. background: linear-gradient(top, #cd, #aa %, #cd);    
  95. }    
  96. .keleyi-com-nav li:first-child::before{    
  97. background: none;    
  98. }    
  99. .keleyi-com-nav li:last-child::after{    
  100. background: none;    
  101. }    
  102. .keleyi-com-nav a,    
  103. .keleyi-com-nav a:hover{    
  104. color:#fff;    
  105. text-decoration: none;    
  106. }    
  107. </style>    
  108. <ul class="keleyi-com-nav black">    
  109. <li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li>    
  110. <li><a href="http://keleyi.com/dev/dba.htm">About Me</a></li>    
  111. <li><a href="http://keleyi.com/dev/cdbafffcac.htm">Portfolio</a></li>    
  112. <li><a href="http://keleyi.com/a/bjac/kpiehx.htm">Blog</a></li>    
  113. <li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li>    
  114. <li><a href="http://keleyi.com/game//">Contact Me</a></li>    
  115. </ul>    
  116. <ul class="keleyi-com-nav red">    
  117. <li><a href="http://keleyi.com/">首页</a></li>    
  118. <li><a href="http://keleyi.com/ablut/">关于</a></li>    
  119. <li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li>    
  120. <li><a href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>    
  121. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>    
  122. <li><a href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>    
  123. </ul>    
  124. <ul class="keleyi-com-nav blue">    
  125. <li><a href="http://keleyi.com/a/bjac/et.htm">Home</a></li>    
  126. <li><a href="http://keleyi.com/a/bjac/wjqxm.htm">About Me</a></li>    
  127. <li><a href="http://keleyi.com/a/bjac/slnymte.htm">Portfolio</a></li>    
  128. <li><a href="http://keleyi.com/a/bjac/mnmpmbv.htm">Blog</a></li>    
  129. <li><a href="http://keleyi.com/a/bjac/cef.htm">Resources</a></li>    
  130. <li><a href="http://keleyi.com/a/bjac/bedbffcaaffa.htm">Contact Me</a></li>    
  131. </ul>    
  132. <ul class="keleyi-com-nav green">    
  133. <li><a href="http://keleyi.com/">首页</a></li>    
  134. <li><a href="http://keleyi.com/ablut/">关于</a></li>    
  135. <li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li>    
  136. <li><a href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>    
  137. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>    
  138. <li><a href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>    
  139. </ul>   

下面给大家分享使用css3和伪元素制作的一个立体导航条

CSS Code复制内容到剪贴板

  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="UTF-8">    
  5. <title>CSS制作立体导航</title>    
  6. <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">    
  7. <style>    
  8. body{    
  9. background: #ebebeb;    
  10. }    
  11. .nav{    
  12. width:560px;    
  13. height: 50px;    
  14. font:bold 0/50px Arial;    
  15. text-align:center;    
  16. margin:40px auto 0;    
  17. background: #f65f57;    
  18. /*制作圆*/    
  19. border-radius:8px;    
  20. /*制作导航立体风格*/    
  21. box-shadow:0px 7px red;    
  22. }    
  23. .nav a{    
  24. display: inline-block;    
  25. -webkit-transition: all 0.2s ease-in;    
  26. -moz-transition: all 0.2s ease-in;    
  27. -o-transition: all 0.2s ease-in;    
  28. -ms-transition: all 0.2s ease-in;    
  29. transition: all 0.2s ease-in;    
  30. color:#fff;    
  31. }    
  32. .nav a:hover{    
  33. -webkit-transform:rotate(10deg);    
  34. -moz-transform:rotate(10deg);    
  35. -o-transform:rotate(10deg);    
  36. -ms-transform:rotate(10deg);    
  37. transform:rotate(10deg);    
  38. text-decoration:none;    
  39. }    
  40. .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. .nav li:first-child::before{    
  50. background-image:none;    
  51. }    
  52. /*使用伪元素制作导航列表项分隔线*/    
  53. .nav li:before{    
  54. content:"";    
  55. color:#666;    
  56. position:absolute;    
  57. top:18px;    
  58. height:20px;    
  59. left:-1px;    
  60. width:1px;    
  61. background-image:linear-gradient(to bottombottom,#f65f57,#993333,#f65f57);    
  62. }    
  63. </style>    
  64. </head>    
  65. <body>    
  66. <ul class="nav">    
  67. <li><a href="">Home</a></li>    
  68. <li><a href="">About Me</a></li>    
  69. <li><a href="">Portfolio</a></li>    
  70. <li><a href="">Blog</a></li>    
  71. <li><a href="">Resources</a></li>    
  72. <li><a href="">Contact Me</a></li>    
  73. </ul>    
  74. </body>    
  75. </html>  

上一篇：兼容IE6、IE7的min-width、max-width写法
下一篇：CSS常用技巧之CSS书写技巧和CSS HACK技巧

最新资源