这次我们要来分享一款很特别的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. }

基于CSS3飘带状3D菜单 菜单带小图标的更多相关文章

  1. CSS3飘带状3D菜单

    在线演示 本地下载

  2. jQuery垂直手风琴菜单 菜单项带小图标

    在线演示 本地下载

  3. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  4. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  5. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  6. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  7. CSS3带小图标垂直下拉菜单

    在线演示 本地下载

  8. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  9. Vue.js 实现的 3D Tab菜单

    今天给大家带来一款基于VueJS的3D Tab菜单,它跟我们之前分享的许多CSS3 Tab菜单不同的是,它可以随着鼠标移动呈现出3D立体的视觉效果,每个tab页面还可以通过CSS自定义封面照片.它的核 ...

随机推荐

  1. PHP mysqli方式连接类

    分享一个PHP以mysqli方式连接类完整代码实例,有关mysqli用法实例. 一个在PHP中以mysqli方式连接数据库的一个数据库类实例,该数据库类是从一个PHP的CMS中整理出来的,可实现PHP ...

  2. [sql]mysql5.6cmake安装/mysql5.7二进制安装

    centos7上cmake编译安装mysql-5.6.36.tar.gz 系统环境 - 环境(安装前规划好主机名,mysql编译过程会用) [root@n1 mysql-5.6.36]# cat /e ...

  3. [vt][xen]xenserver初始安装增加第二块硬盘&xen图形界面安装vm&设置xen里vm开机启动

    为XenServer挂载/增加第二块硬盘的方法 注意: xen6.x和xen7.x vm导出导入是不兼容的.这点有点蛋疼 新买机器后安装xenserver(一般都买刻录机+dvd来刻录xen官网的io ...

  4. Java Base64 编码解码方案总结

    Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便.在实际应用上,Base64除了能将Binary资料可视化之外 ...

  5. python(43):collections模块

    Python作为一个“内置电池”的编程语言,标准库里面拥有非常多好用的模块.比如今天想给大家 介绍的 collections 就是一个非常好的例子. 基本介绍: 我们都知道,python拥有一些内阻的 ...

  6. BleedTree动画混合树[Unity]

    Unity在中土大陆的大肆推广能从广泛的中文翻译资料中看出.所以,手册才是王道. 游戏动画中的一个常见任务是在两个或更多相似运动之间混合.最佳的已知示例可能是根据角色速度混合行走和奔跑动画.另一个示例 ...

  7. 总结: Sort 排序算法

    排序总结 面试经验 硅谷某前沿小Startup面试时,问到的一个题目就是写一个快速排序算法.进而面试官问到了各种算法的算法复杂度,进而又问了Merge Sort 与 QuickSort 的优劣. 对排 ...

  8. 在Jenkins上做一个定时闹钟

    [本文出自天外归云的博客园] 利用Jenkins定时任务来做一个闹钟,每天隔一段时间提醒自己一下“你该休息了!别老坐着!出去走一走!珍爱生命,远离久坐!” 首先在Jenkins上创建一个node. 创 ...

  9. uboot命令实现举例

    之前一直在想,为什么没有人出一个完全从零写uboot和移植剪裁内核的教程,后来发现,确实这样的教程十分不容易,还有就是我们也没有必要花那么多时间去做别人已经做好的事情,所以,一般而言我们只用管怎么实现 ...

  10. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...