基于CSS3飘带状3D菜单 菜单带小图标

这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

在线预览源码下载

实现的代码。

htmll代码：

1. <nav>
2. <menu>
3. <li><ahref="#"><span>t</span><span>twitter</span></a></li>
4. <liid="at"><ahref="#"><span>c</span><span>codepen</span></a></li>
5. <li><ahref="#"><span>d</span><span>dribbble</span></a></li>
6. <li><ahref="#"><span>g</span><span>google+</span></a></li>
7. </menu>
8. <divclass="ribbonleft">
9. </div>
10. <divclass="ribbonright">
11. </div>
12. </nav>

css代码：

1. *
2. {
3. padding:0;
4. margin:0;
5. border:0;
6. }
7. *:after,*:before
8. {
9. display:block;
10. content:"";
11. position:absolute;
12. }
13. body
14. {
15. #3d332a;
16. background-image:url('9690bg.jpg');
17. padding-top:50px;
18. }
19. nav
20. {
21. width:476px;
22. margin:auto;
23. position:relative;
24. }
25. menu:after,menu:before
26. {
27. top:0;
28. width:60px;
29. height:76px;
30. background:#eae2d5;
31. }
32. menu:after
33. {
34. clear:both;
35. right:-61px;
36. border-right:1pxsolid#857e74;
37. }
38. menu:before
39. {
40. left:-55px;
41. border-left:1pxsolid#857e74;
42. }
43. .ribbon
44. {
45. position:absolute;
46. top:76px;
47. border-style:solid;
48. border-width:13px;
49. }
50. .ribbon.left
51. {
52. left:-55px;
53. border-color:#857e74#857e74transparenttransparent;
54. }
55. .ribbon.right
56. {
57. left:511px;
58. border-color:#857e74transparenttransparent#857e74;
59. }
60. .left:after,.left:before
61. {
62. left:-68px;
63. border-style:solid;
64. z-index:-2;
65. }
66. .left:after
67. {
68. top:-68px;
69. border-width:58px0056px;
70. border-color:#eae2d5transparenttransparenttransparent;
71. }
72. .left:before
73. {
74. top:-26px;
75. border-width:040px38px41px;
76. border-color:transparenttransparent#eae2d5transparent;
77. }
78. .right:after,.right:before
79. {
80. right:-65px;
81. border-style:solid;
82. z-index:-2;
83. }
84. .right:before
85. {
86. top:-25px;
87. border-width:040px38px38px;
88. border-color:transparenttransparent#eae2d5transparent;
89. }
90. .right:after
91. {
92. top:-65px;
93. border-width:58px56px00;
94. border-color:#eae2d5transparenttransparenttransparent;
95. }
96. li
97. {
98. float:left;
99. position:relative;
100. margin-left:33px;
101. cursor:pointer;
102. #eae2d5;
103. list-style-type:none;
104. border-left:2pxsolid#d7cfc2;
105. border-right:2pxsolid#d7cfc2;
106. transition:margin.1s,padding.1s,border1s;
107. }
108. li:first-child
109. {
110. margin-left:20px;
111. }
112. li:before,li:after
113. {
114. display:block;
115. position:absolute;
116. top:0;
117. width:20px;
118. height:100%;
119. background:inherit;
120. transition:all.1s;
121. }
122. li:before
123. {
124. right:100%;
125. }
126. li:after
127. {
128. left:100%;
129. }
130. li:hover
131. {
132. margin-top:-9px;
133. box-shadow:04px10px0px#000;
134. transition:margin.2s,padding.2s;
135. }
136. li:hover:before,li:hover:after
137. {
138. height:86%;
139. background:#d7cfc2;
140. transition:all.2s;
141. }
142. li:hover:before
143. {
144. transform:rotate(-30deg)skew(-30deg)translate(1.5px,9px);
145. }
146. li:hover:after
147. {
148. transform:rotate(30deg)skew(30deg)translate(-1.5px,9px);
149. }
150. a
151. {
152. display:block;
153. padding:10px15px;
154. text-decoration:none;
155. text-align:center;
156. }
157. aspan
158. {
159. text-shadow:1px1px1px#FFF;
160. color:#857e74;
161. transition:all.2s;
162. }
163. aspan:first-child
164. {
165. font-family:icon;
166. font-size:33px;
167. display:block;
168. }
169. aspan:last-child
170. {
171. text-transform:capitalize;
172. font-family:'Georgia';
173. font-size:11px;
174. letter-spacing:1px;
175. font-style:italic;
176. color:#6488ba;
177. }
178. li:hoverspan