欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用CSS3制作立體效果導航菜單

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

創(chuàng)新互聯(lián)公司專注于水磨溝企業(yè)網(wǎng)站建設(shè),響應式網(wǎng)站設(shè)計,商城網(wǎng)站制作。水磨溝網(wǎng)站建設(shè)公司,為水磨溝等地區(qū)提供建站服務。全流程專業(yè)公司，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

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

如何使用CSS3制作立體效果導航菜單


創(chuàng)新互聯(lián)友情提醒大家：請使用支持CSS3的瀏覽器訪問本頁面，獲得更好效果。

源代碼：

CSS Code復制內(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">導航樣式</a></li>    

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

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

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

  139. </ul>   

下面給大家分享使用css3和偽元素制作的一個立體導航條

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

  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>  

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

網(wǎng)站題目：如何使用CSS3制作立體效果導航菜單
URL網(wǎng)址：http://chinadenli.net/article26/jiiccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、軟件開發(fā)、網(wǎng)站設(shè)計公司、手機網(wǎng)站建設(shè)、App設(shè)計、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設(shè)