纯CSS3制作带有立体效果的导航菜单.docx

1、纯CSS3制作带有立体效果的导航菜单基于CSS3制作立体效果导航菜单先给大家展示效果图，效果如下：友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。源代码：CSS Code.keleyi-com-navwidth:px;height: px;font:bold /px Arial;text-align:center;margin:px auto ;border-radius: px;.keleyi-com-nav adisplay: inline-block;-webkit-transition: all .s ease-in;-moz-transition: all .s e

2、ase-in;-o-transition: all .s ease-in;-ms-transition: all .s ease-in;transition: all .s ease-in;.keleyi-com-nav a:hover-webkit-transform:rotate(deg);-moz-transform:rotate(deg);-o-transform:rotate(deg);-ms-transform:rotate(deg);transform:rotate(deg);.blackbackground: #ccc;box-shadow: px #bbb;.redbackg

3、round: #ff;box-shadow: px #baa;.bluebackground: #be;box-shadow: px #b;.greenbackground: #cd;box-shadow: px #bb;.keleyi-com-nav liposition:relative;display:inline-block;padding: px;font-size: px;text-shadow:px px px rgba(,.);list-style: none outside none;.keleyi-com-nav li:before,.keleyi-com-nav li:a

4、ftercontent:;position:absolute;top:px;height: px;width: px;.keleyi-com-nav li:afterrightright: ;background: -moz-linear-gradient(top, rgba(,), rgba(,.) %, rgba(,);background: -webkit-linear-gradient(top, rgba(,), rgba(,.) %, rgba(,);background: -o-linear-gradient(top, rgba(,), rgba(,.) %, rgba(,);ba

5、ckground: -ms-linear-gradient(top, rgba(,), rgba(,.) %, rgba(,);background: linear-gradient(top, rgba(,), rgba(,.) %, rgba(,);.black li:beforeleft: ;background: -moz-linear-gradient(top, #ccc, # %, #ccc);background: -webkit-linear-gradient(top, #ccc, # %, #ccc);background: -o-linear-gradient(top, #c

6、cc, # %, #ccc);background: -ms-linear-gradient(top, #ccc, # %, #ccc);background: linear-gradient(top, #ccc, # %, #ccc);.red li:beforeleft: ;background: -moz-linear-gradient(top, #ffa, #eea %, #ffa);background: -webkit-linear-gradient(top, #ffa, #eea %, #ffa);background: -o-linear-gradient(top, #ffa,

7、 #eea %, #ffa);background: -ms-linear-gradient(top, #ffa, #eea %, #ffa);background: linear-gradient(top, #ffa, #eea %, #ffa);.blue li:beforeleft: ;background: -moz-linear-gradient(top, #bdc, #a %, #bdc);background: -webkit-linear-gradient(top, #bdc, #a %, #bdc);background: -o-linear-gradient(top, #b

8、dc, #a %, #bdc);background: -ms-linear-gradient(top, #bdc, #a %, #bdc);background: linear-gradient(top, #bdc, #a %, #bdc);.green li:beforeleft: ;background: -moz-linear-gradient(top, #cd, #aa %, #cd);background: -webkit-linear-gradient(top, #cd, #aa %, #cd);background: -o-linear-gradient(top, #cd, #

9、aa %, #cd);background: -ms-linear-gradient(top, #cd, #aa %, #cd);background: linear-gradient(top, #cd, #aa %, #cd);.keleyi-com-nav li:first-child:beforebackground: none;.keleyi-com-nav li:last-child:afterbackground: none;.keleyi-com-nav a,.keleyi-com-nav a:hovercolor:#fff;text-decoration: none;HomeA

10、bout MePortfolioBlogResourcesContact Me首页关于jQuery AJAX导航样式侧边导航树形菜单HomeAbout MePortfolioBlogResourcesContact Me首页关于jQuery AJAX导航样式侧边导航树形菜单下面给大家分享使用css3和伪元素制作的一个立体导航条CSS CodeCSS制作立体导航bodybackground: #ebebeb;.navwidth:560px;height: 50px;font:bold 0/50px Arial;text-align:center;margin:40px auto 0;backgr

11、ound: #f65f57;/*制作圆*/border-radius:8px;/*制作导航立体风格*/box-shadow:0px 7px red;.nav adisplay: inline-block;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in;color:#fff;.nav a:hover-webkit-tr

12、ansform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);text-decoration:none;.nav liposition:relative;display:inline-block;padding:0 16px;font-size: 13px;text-shadow:1px 2px 4px rgba(0,0,0,.5);list-style: none outside none;/*删除第一项和最后一项导航分隔线*/.nav li:first-child:beforebackground-image:none;/*使用伪元素制作导航列表项分隔线*/.nav li:beforecontent:;color:#666;position:absolute;top:18px;height:20px;left:-1px;width:1px;background-image:linear-gradient(to bottombottom,#f65f57,#993333,#f65f57);HomeAbout MePortfolioBlogResourcesContact Me