首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1062
收藏 0 赞 0 分享
先给大家展示效果图，效果如下：


脚本之家友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。

源代码：
CSS Code复制内容到剪贴板
  1. <style>    
  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. </style>    
  108. <ul class="keleyi-com-nav black">    
  109. <li><a href="http://keleyi.com/a/bjac/utovcdwr.htm">Home</a></li>    
  110. <li><a href="http://keleyi.com/dev/dba.htm">About Me</a></li>    
  111. <li><a href="http://keleyi.com/dev/cdbafffcac.htm">Portfolio</a></li>    
  112. <li><a href="http://keleyi.com/a/bjac/kpiehx.htm">Blog</a></li>    
  113. <li><a href="http://keleyi.com/a/bjac/nmwpqgag.htm">Resources</a></li>    
  114. <li><a href="http://keleyi.com/game//">Contact Me</a></li>    
  115. </ul>    
  116. <ul class="keleyi-com-nav red">    
  117. <li><a href="http://keleyi.com/">首页</a></li>    
  118. <li><a href="http://keleyi.com/ablut/">关于</a></li>    
  119. <li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li>    
  120. <li><a href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>    
  121. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>    
  122. <li><a href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>    
  123. </ul>    
  124. <ul class="keleyi-com-nav blue">    
  125. <li><a href="http://keleyi.com/a/bjac/et.htm">Home</a></li>    
  126. <li><a href="http://keleyi.com/a/bjac/wjqxm.htm">About Me</a></li>    
  127. <li><a href="http://keleyi.com/a/bjac/slnymte.htm">Portfolio</a></li>    
  128. <li><a href="http://keleyi.com/a/bjac/mnmpmbv.htm">Blog</a></li>    
  129. <li><a href="http://keleyi.com/a/bjac/cef.htm">Resources</a></li>    
  130. <li><a href="http://keleyi.com/a/bjac/bedbffcaaffa.htm">Contact Me</a></li>    
  131. </ul>    
  132. <ul class="keleyi-com-nav green">    
  133. <li><a href="http://keleyi.com/">首页</a></li>    
  134. <li><a href="http://keleyi.com/ablut/">关于</a></li>    
  135. <li><a href="http://keleyi.com/a/bjac/kjsrtb.htm">jQuery AJAX</a></li>    
  136. <li><a href="http://keleyi.com/a/bjac/dib.htm">导航样式</a></li>    
  137. <li><a href="http://keleyi.com/a/bjac/mtpy.htm">侧边导航</a></li>    
  138. <li><a href="http://keleyi.com/dev/ae.htm">树形菜单</a></li>    
  139. </ul>   

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

CSS Code复制内容到剪贴板
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="UTF-8">    
  5. <title>CSS制作立体导航</title>    
  6. <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">    
  7. <style>    
  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. </style>    
  64. </head>    
  65. <body>    
  66. <ul class="nav">    
  67. <li><a href="">Home</a></li>    
  68. <li><a href="">About Me</a></li>    
  69. <li><a href="">Portfolio</a></li>    
  70. <li><a href="">Blog</a></li>    
  71. <li><a href="">Resources</a></li>    
  72. <li><a href="">Contact Me</a></li>    
  73. </ul>    
  74. </body>    
  75. </html>  

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22