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

這篇文章給大家分享的是有關如何使用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>  

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