搞不清楚啊
搞不清楚啊、、
sissifly
2014-12-28
1 回答
舉報(bào)
0/150
提交
取消
搞不清楚啊、、
2014-12-28
舉報(bào)
2015-12-31
@import?url("http://www.w3cplus.com/demo/css3/base.css");???? /*任務(wù)一：引入本地字體文件*/???? @font-face?{???? font-family:?'sansationregular';???? src:?url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');???? src:?url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix')?format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),???? url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff')?format('woff'),???? url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf')?format('truetype'),???? url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular')?format('svg');???? font-weight:?normal;???? font-style:?normal;???? }???? body?{???? background-color:#edecec;???? }???? /*?basic?menu?styles?*/???? .nav-menu?{???? display:?block;???? background:?#74adaa;???? width:950px;???? margin:?50px?auto?150px;???? }???? .nav-menu?>?li?{???? display:?inline;???? float:left; ???? border-right:1px?solid?#94c0be;???? }???? .nav-menu?>?li:last-child?{???? border-right:?none;???? }???? .nav-menu?li?a?{???? color:?#fff;???? display:?block;???? text-decoration:?none;???? /*調(diào)用本地字體*/???? font-family:?'sansationregular';???? -webkit-font-smoothing:?antialiased;???? -moz-font-smoothing:?antialiased;???? font-smoothing:?antialiased;???? text-transform:?capitalize;???? overflow:?visible;???? line-height:?20px;???? font-size:?20px;???? padding:?15px?30px?15px?31px; ???? }???? /*?animation?domination?*/???? .three-d?{???? /*?任務(wù)三、設(shè)置3D舞臺(tái)布景?*/???? -webkit-perspective:?200px;???? -moz-perspective:?200px;???? -ms-perspective:?200px;???? -o-perspective:?200px;???? perspective:?200px;???? /*任務(wù)四、設(shè)置3D舞臺(tái)布景過(guò)渡效果*/???? -webkit-transition:?all?.07s?linear;???? -moz-transition:?all?.07s?linear;???? -ms-transition:?all?.07s?linear;???? -o-transition:?all?.07s?linear;???? transition:?all?.07s?linear;???? position:?relative;???? }???? .three-d:not(.active):hover?{???? cursor:?pointer;???? }???? /*任務(wù)五、給不是當(dāng)前狀態(tài)的3D舞臺(tái)的懸浮與聚焦?fàn)顟B(tài)設(shè)置變形效果*/???? .three-d:not(.active):hover?.three-d-box,???? .three-d:not(.active):focus?.three-d-box?{???? -wekbit-transform:?translateZ(-25px)?rotateX(90deg);???? -moz-transform:?translateZ(-25px)?rotateX(90deg);???? -o-transform:?translateZ(-25px)?rotateX(90deg);???? -ms-transform:?translateZ(-25px)?rotateX(90deg);???? transform:?translateZ(-25px)?rotateX(90deg);???? }???? .three-d-box?{???? /*任務(wù)六、給3D舞臺(tái)中“.three-d-box”設(shè)置過(guò)渡與變形效果*/???? -webkit-transition:?all?.3s?ease-out;???? -moz-transition:?all?.3s?ease-out;???? -ms-transition:?all?.3s?ease-out;???? -o-transition:?all?.3s?ease-out;???? transition:?all?.3s?ease-out;???? -webkit-transform:?translatez(-25px);???? -moz-transform:?translatez(-25px);???? -ms-transform:?translatez(-25px);???? -o-transform:?translatez(-25px);???? transform:?translatez(-25px);???? -webkit-transform-style:?preserve-3d;???? -moz-transform-style:?preserve-3d;???? -ms-transform-style:?preserve-3d;???? -o-transform-style:?preserve-3d;???? transform-style:?preserve-3d;???? -webkit-pointer-events:?none;???? -moz-pointer-events:?none;???? -ms-pointer-events:?none;???? -o-pointer-events:?none;???? pointer-events:?none;???? position:?absolute;???? top:?0;???? left:?0;???? display:?block;???? width:?100%;???? height:?100%;???? }???? /*任務(wù)七、給導(dǎo)航設(shè)置3D前，與3D后變形效果*/???? .front?{???? -webkit-transform:?rotatex(0deg)?translatez(25px);???? -moz-transform:?rotatex(0deg)?translatez(25px);???? -ms-transform:?rotatex(0deg)?translatez(25px);???? -o-transform:?rotatex(0deg)?translatez(25px);???? transform:?rotatex(0deg)?translatez(25px);???? }???? .back?{???? -webkit-transform:?rotatex(-90deg)?translatez(25px);???? -moz-transform:?rotatex(-90deg)?translatez(25px);???? -ms-transform:?rotatex(-90deg)?translatez(25px);???? -o-transform:?rotatex(-90deg)?translatez(25px);???? transform:?rotatex(-90deg)?translatez(25px);???? color:?#FFE7C4;???? }???? .front,?.back?{???? display:?block;???? width:?100%;???? height:?100%;???? position:?absolute;???? top:?0;???? left:?0;???? background:?#74adaa;???? padding:?15px?30px?15px?31px; ???? color:?white;???? -webkit-pointer-events:?none;???? -moz-pointer-events:?none;???? -ms-pointer-events:?none;???? -o-pointer-events:?none;???? pointer-events:?none;???? -webkit-box-sizing:?border-box;???? box-sizing:?border-box;???? }???? /*任務(wù)八、設(shè)置導(dǎo)航當(dāng)前狀態(tài)與懸浮狀態(tài)下的背景效果*/???? .nav-menu?li?.active?.front,???? .nav-menu?li?.active?.back,???? .nav-menu?li?a:hover?.front,???? .nav-menu?li?a:hover?.back?{???? background-color:?#51938f;???? -webkit-background-size:?5px?5px;???? background-size:?5px?5px;???? background-position:?0?0,?30px?30px;???? background-image:?-webit-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);???? background-image:?-moz-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);???? background-image:?-ms-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);???? background-image:?-o-linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);???? background-image:?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480),?linear-gradient(45deg,?#478480?25%,?transparent?25%,?transparent?75%,?#478480?75%,?#478480);???? }???? .nav-menu?ul?{???? position:?absolute;???? text-align:?left;???? line-height:?40px;???? font-size:?14px;???? width:?200px;???? -webkit-transition:?all?0.3s?ease-in;???? -moz-transition:?all?0.3s?ease-in;???? -ms-transition:?all?0.3s?ease-in;???? -o-transition:?all?0.3s?ease-in;???? transition:?all?0.3s?ease-in;???? -webkit-transform-origin:?0px?0px;???? -moz-transform-origin:?0px?0px;???? -ms-transform-origin:?0px?0px;???? -o-transform-origin:?0px?0px;???? transform-origin:?0px?0px;???? -webkit-transform:?rotateX(-90deg);???? -moz-transform:?rotateX(-90deg);???? -ms-transform:?rotateX(-90deg);???? -o-transform:?rotateX(-90deg);???? transform:?rotateX(-90deg);???? -webkit-backface-visibility:?hidden;???? -moz-backface-visibility:?hidden;???? -ms-backface-visibility:?hidden;???? -o-backface-visibility:?hidden;???? backface-visibility:?hidden;???? }???? /*任務(wù)九、顯示下拉導(dǎo)航菜單，并其設(shè)置一個(gè)變形效果*/???? .nav-menu?>?li:hover?ul?{???? display:?block;???? -webkit-transform:?rotateX(0deg);???? -moz-transform:?rotateX(0deg);???? -ms-transform:?rotateX(0deg);???? -o-transform:?rotateX(0deg);???? transform:?rotateX(0deg);???? }挨個(gè)過(guò)一下，再過(guò)一下，就差不多了