css3三维动画菜单上下翻转

原创 2015年07月08日 11:56:38
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3三维动画菜单上下翻转</title>
<style>
*{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);
}


</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Resort</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Ski Slopes</a></li>
<li><a href="#url">Night Life</a></li>
<li><a href="#url">Ski Hire Facilities</a></li>
</ul>
<ul class="col">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Advanced Skills</a></li>
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a href="#url">Expert</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Information</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a href="#url">Snow Report</a></li>
<li><a href="#url">Gear Rental</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Nearby</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS 3D翻转卡片动画

原文链接:http://caibaojian.com/3d-flip-card.html 这个CSS翻转卡片效果是在鼠标滑过上面的时候会有一个炫酷的旋转,显示下面的后面卡片,并且有发光的效果。下面分...

css3动画垂直翻转180度

html代码 Search <a href="http://www.

jQueryCss3三维动画模型

  • 2015-07-21 16:45
  • 105KB
  • 下载

CSS3三维旋转模拟书本翻页效果

CSS3三维旋转模拟书本翻页效果 其实主要就是应用transform:rotateY() CSS3三维旋转模拟书本翻页效果 @keyframes rotate-frame{...

css3三维转动

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷

HTML5+CSS3实现iOS Path菜单特效,动画效果很酷 源代码下载地址:http://www.zuidaima.com/share/1760404963691520.htm

css3动画_二级下拉菜单

html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)

第一种导航菜单,最普通的:(竖直的) *{margin: 0;padding: 0;font-size: 14px;} ul{list-style: none;width:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)