极乐门资源网 Design By www.ioogu.com
先给大家展示效果图,效果如下:

基于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{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>  

标签:
css3立体效果,css3,导航菜单

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“基于CSS3制作立体效果导航菜单”

暂无基于CSS3制作立体效果导航菜单的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?