css3 three-dimensional animated menu flip up and down_html/css_WEB-ITnose

css3三维动画菜单上下翻转 *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} .tips{width:980px;margin:0 auto;line-height:24px;padding-top:10px;} .bredcolor{color:#fff;} #info {overflow:hidden;} /* the menu style */ .menuHolder {margin:1px 0 20px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;} .menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-80deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url("arrow.gif") no-repeat left center;} .menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url("arrow.gif") no-repeat 1px center;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

http://www.999jiujiu.com/ Home Resort Ski Slopes Night Life Ski Hire Facilities Snow Hotel Ice Cavern Ski Inn Advanced Skills Beginners Slopes Intermediate Slopes Expert Information Lift Passes Insurance Snow Report Gear Rental Boots Skis Goggles Contact Email Telephone Online Form Privacy Nearby Where to go What to do Places of interest Snow Hotel The Snowman Ice Cavern Ski Inn

css3 three-dimensional animated menu flip up and down_html/css_WEB-ITnose

Related articles