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

互联网
荣誉就像河流：轻浮的和空虚的荣誉浮在河面上，沉重的和厚实的荣誉沉在河底里。雨会停，心会晴，没有什么会永远糟糕透顶。
先给大家展示效果图，效果如下：


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

源代码：
CSS Code复制内容到剪贴板
  1. <style>
  2. .keleyi-com-nav{
  3. width:px;
  4. height:px;
  5. font:bold/pxArial;
  6. text-align:center;
  7. margin:pxauto;
  8. border-radius:px;
  9. }
  10. .keleyi-com-nava{display:inline-block;
  11. -webkit-transition:all.sease-in;
  12. -moz-transition:all.sease-in;
  13. -o-transition:all.sease-in;
  14. -ms-transition:all.sease-in;
  15. transition:all.sease-in;
  16. }
  17. .keleyi-com-nava: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-navli{
  41. position:relative;
  42. display:inline-block;
  43. padding:px;
  44. font-size:px;
  45. text-shadow:pxpxpxrgba(,,,.);
  46. list-style:noneoutsidenone;
  47. }
  48. .keleyi-com-navli::before,
  49. .keleyi-com-navli::after{
  50. content:"";
  51. position:absolute;
  52. top:px;
  53. height:px;
  54. width:px;
  55. }
  56. .keleyi-com-navli::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. .blackli::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. .redli::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. .blueli::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. .greenli::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-navli:first-child::before{
  97. background:none;
  98. }
  99. .keleyi-com-navli:last-child::after{
  100. background:none;
  101. }
  102. .keleyi-com-nava,
  103. .keleyi-com-nava:hover{
  104. color:#fff;
  105. text-decoration:none;
  106. }
  107. </style>
  108. <ulclass="keleyi-com-navblack">
  109. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li>
  110. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/dev/dba.htm">AboutMe</a></li>
  111. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/dev/cdbafffcac.htm">Portfolio</a></li>
  112. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/kpiehx.htm">Blog</a></li>
  113. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li>
  114. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/game//">ContactMe</a></li>
  115. </ul>
  116. <ulclass="keleyi-com-navred">
  117. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/">首页</a></li>
  118. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/ablut/">关于</a></li>
  119. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/kjsrtb.htm">jQueryAJAX</a></li>
  120. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>
  121. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>
  122. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>
  123. </ul>
  124. <ulclass="keleyi-com-navblue">
  125. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/et.htm">Home</a></li>
  126. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/wjqxm.htm">AboutMe</a></li>
  127. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/slnymte.htm">Portfolio</a></li>
  128. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/mnmpmbv.htm">Blog</a></li>
  129. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/cef.htm">Resources</a></li>
  130. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/bedbffcaaffa.htm">ContactMe</a></li>
  131. </ul>
  132. <ulclass="keleyi-com-navgreen">
  133. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/">首页</a></li>
  134. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/ablut/">关于</a></li>
  135. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/kjsrtb.htm">jQueryAJAX</a></li>
  136. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>
  137. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>
  138. <li><arel="nofollow noopener noreferrer" href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>
  139. </ul>

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

CSS Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS制作立体导航</title>
  6. <linkrel="stylesheet"rel="nofollow noopener noreferrer" 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:bold0/50pxArial;
  15. text-align:center;
  16. margin:40pxauto0;
  17. background:#f65f57;
  18. /*制作圆*/
  19. border-radius:8px;
  20. /*制作导航立体风格*/
  21. box-shadow:0px7pxred;
  22. }
  23. .nava{
  24. display:inline-block;
  25. -webkit-transition:all0.2sease-in;
  26. -moz-transition:all0.2sease-in;
  27. -o-transition:all0.2sease-in;
  28. -ms-transition:all0.2sease-in;
  29. transition:all0.2sease-in;
  30. color:#fff;
  31. }
  32. .nava: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. .navli{
  41. position:relative;
  42. display:inline-block;
  43. padding:016px;
  44. font-size:13px;
  45. text-shadow:1px2px4pxrgba(0,0,0,.5);
  46. list-style:noneoutsidenone;
  47. }
  48. /*删除第一项和最后一项导航分隔线*/
  49. .navli:first-child::before{
  50. background-image:none;
  51. }
  52. /*使用伪元素制作导航列表项分隔线*/
  53. .navli: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(tobottombottom,#f65f57,#993333,#f65f57);
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <ulclass="nav">
  67. <li><arel="nofollow noopener noreferrer" href="">Home</a></li>
  68. <li><arel="nofollow noopener noreferrer" href="">AboutMe</a></li>
  69. <li><arel="nofollow noopener noreferrer" href="">Portfolio</a></li>
  70. <li><arel="nofollow noopener noreferrer" href="">Blog</a></li>
  71. <li><arel="nofollow noopener noreferrer" href="">Resources</a></li>
  72. <li><arel="nofollow noopener noreferrer" href="">ContactMe</a></li>
  73. </ul>
  74. </body>
  75. </html>

本文基于CSS3制作立体效果导航菜单到此结束。别人赏赐的赞许能够成为一种强大的支配力量。你的价值完全取决于别人的看法，一旦别人不再施舍赞许，你便一无所有，你会觉得自我一文不值。所以，需要赞许是一种负能量，你越是需要得到恭维，就越有可能受到别人的支配。小编再次感谢大家对我们的支持！