溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用CSS3制作立體效果導(dǎo)航菜單

發(fā)布時(shí)間：2021-07-02 11:22:39 來源：億速云 閱讀：143 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何使用CSS3制作立體效果導(dǎo)航菜單的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

先給大家展示效果圖，效果如下：

如何使用CSS3制作立體效果導(dǎo)航菜單


億速云友情提醒大家：請(qǐng)使用支持CSS3的瀏覽器訪問本頁面，獲得更好效果。

源代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

  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/">關(guān)于</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">導(dǎo)航樣式</a></li>    

  121. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">側(cè)邊導(dǎo)航</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/">關(guān)于</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">導(dǎo)航樣式</a></li>    

  137. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">側(cè)邊導(dǎo)航</a></li>    

  138. <li><a href="http://keleyi.com/dev/ae.htm">樹形菜單</a></li>    

  139. </ul>   

下面給大家分享使用css3和偽元素制作的一個(gè)立體導(dǎo)航條

CSS Code復(fù)制內(nèi)容到剪貼板

  1. <!doctype html>    

  2. <html lang="en">    

  3. <head>    

  4. <meta charset="UTF-8">    

  5. <title>CSS制作立體導(dǎo)航</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. /*制作導(dǎo)航立體風(fēng)格*/    

  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. /*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/    

  49. .nav li:first-child::before{    

  50. background-image:none;    

  51. }    

  52. /*使用偽元素制作導(dǎo)航列表項(xiàng)分隔線*/    

  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>  

感謝各位的閱讀！關(guān)于“如何使用CSS3制作立體效果導(dǎo)航菜單”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手