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

1.     
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.     
108.     
110. "http://keleyi.com/a/bjac/utovcdwr.htm">Home
    
112. "http://keleyi.com/dev/dba.htm">about Me
    
114. "http://keleyi.com/dev/cdbafffcac.htm">Portfolio
    
116. "http://keleyi.com/a/bjac/kpiehx.htm">Blog
    
118. "http://keleyi.com/a/bjac/nmwpqgag.htm">Resources
    
120. "http://keleyi.com/game//">Contact Me
    
121.     
122.     
124. "http://keleyi.com/">首页
    
126. "http://keleyi.com/ablut/">关于
    
128. "http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX
    
130. "http://keleyi.com/a/bjac/dib.htm">导航样式
    
132. "http://keleyi.com/a/bjac/mtpy.htm">侧边导航
    
134. "http://keleyi.com/dev/ae.htm">树形菜单
    
135.     
136.     
138. "http://keleyi.com/a/bjac/et.htm">Home
    
140. "http://keleyi.com/a/bjac/wjqxm.htm">about Me
    
142. "http://keleyi.com/a/bjac/slnymte.htm">Portfolio
    
144. "http://keleyi.com/a/bjac/mnmpmbv.htm">Blog
    
146. "http://keleyi.com/a/bjac/cef.htm">Resources
    
148. "http://keleyi.com/a/bjac/bedbffcaaffa.htm">Contact Me
    
149.     
150.     
152. "http://keleyi.com/">首页
    
154. "http://keleyi.com/ablut/">关于
    
156. "http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX
    
158. "http://keleyi.com/a/bjac/dib.htm">导航样式
    
160. "http://keleyi.com/a/bjac/mtpy.htm">侧边导航
    
162. "http://keleyi.com/dev/ae.htm">树形菜单
    
163.    
     

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

CSS Code复制内容到剪贴板

1.     
2.     
3.     
4.     
5.     
6.     
7.     
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.     
64.     
65.     
66.     
68. "">Home
    
70. "">about Me
    
72. "">Portfolio
    
74. "">Blog
    
76. "">Resources
    
78. "">Contact Me
    
79.     
80.     
81.