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

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

在线预览   源码下载

实现的代码。

htmll代码：

1. <nav>
2. <menu>
3. <li><a href=”#”><span>t</span> <span>twitter</span> </a></li>
4. <li id=”at”><a href=”#”><span>c</span> <span>codepen</span> </a></li>
5. <li><a href=”#”><span>d</span> <span>dribbble</span> </a></li>
6. <li><a href=”#”><span>g</span> <span>google+</span> </a></li>
7. </menu>
8. <div class=”ribbon left”>
9. </div>
10. <div class=”ribbon right”>
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: 1px solid #857e74;
37. }
38. menu:before
39. {
40. left: -55px;
41. border-left: 1px solid #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 #857e74 transparent transparent;
54. }
55. .ribbon.right
56. {
57. left: 511px;
58. border-color: #857e74 transparent transparent #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: 58px 0 0 56px;
70. border-color: #eae2d5 transparent transparent transparent;
71. }
72. .left:before
73. {
74. top: -26px;
75. border-width: 0 40px 38px 41px;
76. border-color: transparent transparent #eae2d5 transparent;
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: 0 40px 38px 38px;
88. border-color: transparent transparent #eae2d5 transparent;
89. }
90. .right:after
91. {
92. top: -65px;
93. border-width: 58px 56px 0 0;
94. border-color: #eae2d5 transparent transparent transparent;
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: 2px solid #d7cfc2;
105. border-right: 2px solid #d7cfc2;
106. transition: margin .1s ,padding .1s ,border 1s;
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: 0 4px 10px 0px #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: 10px 15px;
154. text-decoration: none;
155. text-align: center;
156. }
157. a span
158. {
159. text-shadow: 1px 1px 1px #FFF;
160. color: #857e74;
161. transition: all .2s;
162. }
163. a span:first-child
164. {
165. font-family: icon;
166. font-size: 33px;
167. display: block;
168. }
169. a span: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:hover span
179. {
180. transition: all .2s;
181. }
182. li:hover a span:first-child
183. {
184. color: #6488ba;
185. text-shadow: 1px 1px 1px #FFF , 0 0 1px #6488ba;
186. }
187. li:hover a span:last-child
188. {
189. color: #857e74;
190. }
191. @font-face
192. {
193. font-family: icon;
194. src: url(‘http://bennettfeely.com/fonts/icons.woff’);
195. }