基于CSS3制作立体效果导航菜单
脚本之家友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。
源代码：
CSS Code 复制内容到剪贴板 <style> .keleyi-com-nav{ width :px; height : px; font : bold /px Arial ; text-align : center ; margin :px auto ; border -radius: px; } .keleyi-com-nav a{ display : inline - block ; -webkit-transition: all .s ease-in; -moz-transition: all .s ease-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); } . black { background : #ccc ; box-shadow: px #bbb ; } . red { background : #ff; box-shadow: px #baa ; } . blue { background : #be; box-shadow: px #b; } . green { background : #cd; box-shadow: px #bb; } .keleyi-com-nav li{ position : 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::after{ content : "" ; position : absolute ; top :px; height : px; width : px; } .keleyi-com-nav li::after{ right right : ; background : -moz-linear-gradient( top , rgba(,,,), rgba(,,,.) %, rgba(,,,)); background : -webkit-linear-gradient( top , rgba(,,,), rgba(,,,.) %, rgba(,,,)); background : -o-linear-gradient( top , rgba(,,,), rgba(,,,.) %, rgba(,,,)); background : -ms-linear-gradient( top , rgba(,,,), rgba(,,,.) %, rgba(,,,)); background : linear-gradient( top , rgba(,,,), rgba(,,,.) %, rgba(,,,)); } . black li::before{ left : ; background : -moz-linear-gradient( top , #ccc , # %, #ccc ); background : -webkit-linear-gradient( top , #ccc , # %, #ccc ); background : -o-linear-gradient( top , #ccc , # %, #ccc ); background : -ms-linear-gradient( top , #ccc , # %, #ccc ); background : linear-gradient( top , #ccc , # %, #ccc ); } . red li::before{ left : ; background : -moz-linear-gradient( top , #ffa , #eea %, #ffa ); background : -webkit-linear-gradient( top , #ffa , #eea %, #ffa ); background : -o-linear-gradient( top , #ffa , #eea %, #ffa ); background : -ms-linear-gradient( top , #ffa , #eea %, #ffa ); background : linear-gradient( top , #ffa , #eea %, #ffa ); } . blue li::before{ left : ; background : -moz-linear-gradient( top , #bdc , #a %, #bdc ); background : -webkit-linear-gradient( top , #bdc , #a %, #bdc ); background : -o-linear-gradient( top , #bdc , #a %, #bdc ); background : -ms-linear-gradient( top , #bdc , #a %, #bdc ); background : linear-gradient( top , #bdc , #a %, #bdc ); } . green li::before{ left : ; background : -moz-linear-gradient( top , #cd, #aa %, #cd); background : -webkit-linear-gradient( top , #cd, #aa %, #cd); background : -o-linear-gradient( top , #cd, #aa %, #cd); background : -ms-linear-gradient( top , #cd, #aa %, #cd); background : linear-gradient( top , #cd, #aa %, #cd); } .keleyi-com-nav li:first-child::before{ background : none ; } .keleyi-com-nav li:last-child::after{ background : none ; } .keleyi-com-nav a, .keleyi-com-nav a:hover{ color : #fff ; text-decoration : none ; } </style> <ul class= "keleyi-com-nav black" > <li><a href= "http://keleyi.com/a/bjac/utovcdwr.htm" >Home</a></li> <li><a href= "http://keleyi.com/dev/dba.htm" >About Me</a></li> <li><a href= "http://keleyi.com/dev/cdbafffcac.htm" >Portfolio</a></li> <li><a href= "http://keleyi.com/a/bjac/kpiehx.htm" >Blog</a></li> <li><a href= "http://keleyi.com/a/bjac/nmwpqgag.htm" >Resources</a></li> <li><a href= "http://keleyi.com/game//" >Contact Me</a></li> </ul> <ul class= "keleyi-com-nav red" > <li><a href= "http://keleyi.com/" >首页</a></li> <li><a href= "http://keleyi.com/ablut/" >关于</a></li> <li><a href= "http://keleyi.com/a/bjac/kjsrtb.htm" >jQuery AJAX</a></li> <li><a href= "http://keleyi.com/a/bjac/dib.htm" >导航样式</a></li> <li><a href= "http://keleyi.com/a/bjac/mtpy.htm" >侧边导航</a></li> <li><a href= "http://keleyi.com/dev/ae.htm" >树形菜单</a></li> </ul> <ul class= "keleyi-com-nav blue" > <li><a href= "http://keleyi.com/a/bjac/et.htm" >Home</a></li> <li><a href= "http://keleyi.com/a/bjac/wjqxm.htm" >About Me</a></li> <li><a href= "http://keleyi.com/a/bjac/slnymte.htm" >Portfolio</a></li> <li><a href= "http://keleyi.com/a/bjac/mnmpmbv.htm" >Blog</a></li> <li><a href= "http://keleyi.com/a/bjac/cef.htm" >Resources</a></li> <li><a href= "http://keleyi.com/a/bjac/bedbffcaaffa.htm" >Contact Me</a></li> </ul> <ul class= "keleyi-com-nav green" > <li><a href= "http://keleyi.com/" >首页</a></li> <li><a href= "http://keleyi.com/ablut/" >关于</a></li> <li><a href= "http://keleyi.com/a/bjac/kjsrtb.htm" >jQuery AJAX</a></li> <li><a href= "http://keleyi.com/a/bjac/dib.htm" >导航样式</a></li> <li><a href= "http://keleyi.com/a/bjac/mtpy.htm" >侧边导航</a></li> <li><a href= "http://keleyi.com/dev/ae.htm" >树形菜单</a></li> </ul>
下面给大家分享使用css3和伪元素制作的一个立体导航条
CSS Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"> <style> body{ background: #ebebeb; } .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*制作圆*/ border-radius:8px; /*制作导航立体风格*/ box-shadow:0px 7px red; } .nav a{ display: 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-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); text-decoration:none; } .nav li{ position: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::before{ background-image:none; } /*使用伪元素制作导航列表项分隔线*/ .nav li:before{ content:""; color:#666; position:absolute; top:18px; height:20px; left:-1px; width:1px; background-image:linear-gradient(to bottombottom,#f65f57,#993333,#f65f57); } </style> </head> <body> <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li> </ul> </body> </html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
