纯CSS3制作带有立体效果的导航菜单Word文档格式.docx

纯CSS3制作带有立体效果的导航菜单Word文档格式.docx

《纯CSS3制作带有立体效果的导航菜单Word文档格式.docx》由会员分享，可在线阅读，更多相关《纯CSS3制作带有立体效果的导航菜单Word文档格式.docx（9页珍藏版）》请在冰点文库上搜索。

border-radius:

}

.keleyi-com-nava{display:

inline-block;

-webkit-transition:

all.sease-in;

-moz-transition:

-o-transition:

-ms-transition:

transition:

.keleyi-com-nava:

hover{

-webkit-transform:

rotate（deg）;

-moz-transform:

-o-transform:

-ms-transform:

transform:

.black{

background:

#ccc;

box-shadow:

px#bbb;

.red{

#ff;

px#baa;

.blue{

#be;

px#b;

.green{

#cd;

px#bb;

.keleyi-com-navli{

position:

relative;

display:

inline-block;

padding:

font-size:

text-shadow:

pxpxpxrgba（,,,.）;

list-style:

noneoutsidenone;

.keleyi-com-navli:

:

before,

after{

content:

"

;

absolute;

top:

rightright:

;

-moz-linear-gradient（top,rgba（,,,）,rgba（,,,.）%,rgba（,,,））;

-webkit-linear-gradient（top,rgba（,,,）,rgba（,,,.）%,rgba（,,,））;

-o-linear-gradient（top,rgba（,,,）,rgba（,,,.）%,rgba（,,,））;

-ms-linear-gradient（top,rgba（,,,）,rgba（,,,.）%,rgba（,,,））;

linear-gradient（top,rgba（,,,）,rgba（,,,.）%,rgba（,,,））;

.blackli:

before{

left:

-moz-linear-gradient（top,#ccc,#%,#ccc）;

-webkit-linear-gradient（top,#ccc,#%,#ccc）;

-o-linear-gradient（top,#ccc,#%,#ccc）;

-ms-linear-gradient（top,#ccc,#%,#ccc）;

linear-gradient（top,#ccc,#%,#ccc）;

.redli:

-moz-linear-gradient（top,#ffa,#eea%,#ffa）;

-webkit-linear-gradient（top,#ffa,#eea%,#ffa）;

-o-linear-gradient（top,#ffa,#eea%,#ffa）;

-ms-linear-gradient（top,#ffa,#eea%,#ffa）;

linear-gradient（top,#ffa,#eea%,#ffa）;

.blueli:

-moz-linear-gradient（top,#bdc,#a%,#bdc）;

-webkit-linear-gradient（top,#bdc,#a%,#bdc）;

-o-linear-gradient（top,#bdc,#a%,#bdc）;

-ms-linear-gradient（top,#bdc,#a%,#bdc）;

linear-gradient（top,#bdc,#a%,#bdc）;

.greenli:

-moz-linear-gradient（top,#cd,#aa%,#cd）;

-webkit-linear-gradient（top,#cd,#aa%,#cd）;

-o-linear-gradient（top,#cd,#aa%,#cd）;

-ms-linear-gradient（top,#cd,#aa%,#cd）;

linear-gradient（top,#cd,#aa%,#cd）;

first-child:

none;

last-child:

.keleyi-com-nava,

color:

#fff;

text-decoration:

/style>

ulclass="

keleyi-com-navblack"

>

li>

ahref="

a/bjac/utovcdwr.htm"

Home<

/a>

/li>

dev/dba.htm"

AboutMe<

dev/cdbafffcac.htm"

Portfolio<

a/bjac/kpiehx.htm"

Blog<

a/bjac/nmwpqgag.htm"

Resources<

game//"

ContactMe<

/ul>

keleyi-com-navred"

首页<

ablut/"

关于<

a/bjac/kjsrtb.htm"

jQueryAJAX<

a/bjac/dib.htm"

导航样式<

a/bjac/mtpy.htm"

侧边导航<

dev/ae.htm"

树形菜单<

keleyi-com-navblue"

a/bjac/et.htm"

a/bjac/wjqxm.htm"

a/bjac/slnymte.htm"

a/bjac/mnmpmbv.htm"

a/bjac/cef.htm"

a/bjac/bedbffcaaffa.htm"

keleyi-com-navgreen"

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

!

doctypehtml>

htmllang="

en"

head>

metacharset="

UTF-8"

title>

CSS制作立体导航<

/title>

linkrel="

stylesheet"

href="

"

body{

#ebebeb;

.nav{

560px;

50px;

bold0/50pxArial;

40pxauto0;

#f65f57;

/*制作圆*/

8px;

/*制作导航立体风格*/

0px7pxred;

.nava{

all0.2sease-in;

.nava:

rotate（10deg）;

none;

.navli{

016px;

13px;

1px2px4pxrgba（0,0,0,.5）;

/*删除第一项和最后一项导航分隔线*/

.navli:

background-image:

/*使用伪元素制作导航列表项分隔线*/

#666;

18px;

20px;

-1px;

1px;

linear-gradient（tobottombottom,#f65f57,#993333,#f65f57）;

/head>

body>

nav"

/body>

/html>