导航菜单

纯CSS3黑色气泡背景动画菜单

也想出现在这里?联系我们
创客云

纯CSS3黑色气泡背景动画菜单-云模板
今天我们要来分享一款非常酷的 CSS3 动画菜单,这款 CSS3 菜单有一个很漂亮的黑色气泡背景,菜单是银白色的,和黑色的背景交织在一起更加显得有 3D 立体的视觉效果。CSS3 的运用让菜单有圆角的效果,鼠标滑过菜单时也会改变背景。下面是实现这款 CSS3 菜单的过程和源代码,一起来看看。

HTML 代码:

  1. <nav>
  2.             <ul class="fancyNav">
  3.                 <li id="home"><a href="#home" class="homeIcon">Home</a></li>
  4.                 <li id="news"><a href="#news">News</a></li>
  5.                 <li id="about"><a href="#about">About us</a></li>
  6.                 <li id="services"><a href="#services">Services</a></li>
  7.                 <li id="contact"><a href="#contact">Contact us</a></li>
  8.             </ul>
  9.         </nav>
也想出现在这里?联系我们
创客主机

这里我们用了 ul li 列表构造了菜单的结构,非常简单。

CSS 代码:

  1. .fancyNav{
  2. 	/* Affects the UL element */
  3. 	overflow: hidden;
  4. 	display: inline-block;
  5. }
  6.  
  7. .fancyNav li{
  8. 	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
  9.  
  10. 	background-color: #f0f0f0;
  11. 	background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
  12. 	background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  13. 	background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  14. 	background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  15. 	background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  16.  
  17. 	border-right: 1px solid rgba(9, 9, 9, 0.125);
  18.  
  19. 	/* Adding a 1px inset highlight for a more polished efect: */
  20.  
  21. 	box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  22. 	-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  23. 	-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  24.  
  25. 	position:relative;
  26.  
  27. 	float: left;
  28. 	list-style: none;
  29. }
  30.  
  31. .fancyNav li:after{
  32.  
  33. 	/* This creates a pseudo element inslide each LI */	
  34.  
  35. 	content:'.';
  36. 	text-indent:-9999px;
  37. 	overflow:hidden;
  38. 	position:absolute;
  39. 	width:100%;
  40. 	height:100%;
  41. 	top:0;
  42. 	left:0;
  43. 	z-index:1;
  44. 	opacity:0;
  45.  
  46. 	/* Gradients! */
  47.  
  48. 	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
  49. 	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  50. 	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  51. 	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  52. 	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  53.  
  54. 	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
  55.  
  56. 	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  57. 	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  58. 	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  59.  
  60. 	/* This will create a smooth transition for the opacity property */
  61.  
  62. 	-moz-transition:0.25s all;
  63. 	-webkit-transition:0.25s all;
  64. 	-o-transition:0.25s all;
  65. 	transition:0.25s all;
  66. }
  67.  
  68. /* Treating the first LI and li:after elements separately */
  69.  
  70. .fancyNav li:first-child{
  71. 	border-radius: 4px 0 0 4px;
  72. }
  73.  
  74. .fancyNav li:first-child:after,
  75. .fancyNav li.selected:first-child:after{
  76. 	box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  77. 	-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  78. 	-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  79.  
  80. 	border-radius:4px 0 0 4px;
  81. }
  82.  
  83. .fancyNav li:last-child{
  84. 	border-radius: 0 4px 4px 0;
  85. }
  86.  
  87. /* Treating the last LI and li:after elements separately */
  88.  
  89. .fancyNav li:last-child:after,
  90. .fancyNav li.selected:last-child:after{
  91. 	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  92. 	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  93. 	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  94.  
  95. 	border-radius:0 4px 4px 0;
  96. }
  97.  
  98. .fancyNav li:hover:after,
  99. .fancyNav li.selected:after,
  100. .fancyNav li:target:after{
  101. 	/* This property triggers the CSS3 transition */
  102. 	opacity:1;
  103. }
  104.  
  105. .fancyNav:hover li.selected:after,
  106. .fancyNav:hover li:target:after{
  107. 	/* Hides the targeted li when we are hovering on the UL */
  108. 	opacity:0;
  109. }
  110.  
  111. .fancyNav li.selected:hover:after,
  112. .fancyNav li:target:hover:after{
  113. 	opacity:1 !important;
  114. }
  115.  
  116. /* Styling the anchor elements */
  117.  
  118. .fancyNav li a{
  119. 	color: #5d5d5d;
  120. 	display: inline-block;
  121. 	font: 20px/1 Lobster,Arial,sans-serif;
  122. 	padding: 12px 35px 14px;
  123. 	position: relative;
  124. 	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  125. 	z-index:2;
  126. 	text-decoration:none !important;
  127. 	white-space:nowrap;
  128. }
  129.  
  130. .fancyNav a.homeIcon{
  131. 	background:url('../img/home.png') no-repeat center center;
  132. 	display: block;
  133. 	overflow: hidden;
  134. 	padding-left: 12px;
  135. 	padding-right: 12px;
  136. 	text-indent: -9999px;
  137. 	width: 16px;
  138. }

这款 CSS 菜单非常不错,大家可以尝试一下。

资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件