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

前端  /  管理员 发布于 7年前   392

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

AIDI友情提醒大家：请使用支持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>