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


Posted in HTML / CSS onJanuary 12, 2016

先给大家展示效果图,效果如下:

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


三水点靠木友情提醒大家:请使用支持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{displayinline-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-stylenone 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. backgroundnone;    
  98. }    
  99. .keleyi-com-nav li:last-child::after{    
  100. backgroundnone;    
  101. }    
  102. .keleyi-com-nav a,    
  103. .keleyi-com-nav a:hover{    
  104. color:#fff;    
  105. text-decorationnone;    
  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. height50px;    
  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. displayinline-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-size13px;    
  45. text-shadow:1px 2px 4px rgba(0,0,0,.5);    
  46. list-stylenone 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>  
HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
You might like
JS实现php的伪分页
2008/05/25 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php画图实例
2014/11/05 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php fread函数使用方法总结
2019/05/28 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python交换两个变量的值方法
2019/01/12 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python 怎样进行内存管理
2020/11/10 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
Android笔试题总结
2014/11/29 面试题
旅游管理专业生自荐信范文
2014/01/02 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
重阳节活动总结
2014/08/27 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书