首页 > HTML/CSS

纯CSS3三维动画菜单上下翻转

发表于2015-07-09 11:06:23| 968次阅读| 来源webkfa| 作者html,css

摘要：三维阴影效果的CSS3动画菜单，运用纯CSS3技术实现的菜单，好酷呀的菜单，那些阴影和圆角都是用CSS3实现的哦，没有使用图片修饰啊，学习CSS3的朋友，可不要错过本示例哦，希望大家喜欢。
html5代码
运行代码
view sourceprint?
001<!DOCTYPE HTML>
002<html lang=zh-cn>
003<head>
004<meta charset=utf-8>
005<title>css3三维动画菜单上下翻转</title>
006<style>
007*{margin:0px;padding:0px;}
008body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
009.tips{width:980px;margin:0 auto;line-height:24px;padding-top:10px;}
010.bredcolor{color:#fff;}
011#info {overflow:hidden;}
012/* the menu style */
013.menuHolder {margin:1px 0 20px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
014background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
015background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
016background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
017background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
018border-radius:8px;
019box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
020-moz-perspective: 100px;
021-webkit-perspective: 100px;
022-o-perspective: 100px;
023perspective: 100px;
024}
025.menuHolder ul.nav li {display:inline-block; display:inline;}
026.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
027-moz-transform-style: preserve-3d;
028-webkit-transform-style: preserve-3d;
029-o-transform-style: preserve-3d;
030transform-style: preserve-3d;
031}
032.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
033.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
034.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
035.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
036.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
037-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
038-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
039-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
040box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
041}
042.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
043border-radius:0 0 15px 15px;
044box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
045-webkit-transition: 0.5s;
046-moz-transition: 0.5s;
047-o-transition: 0.5s;
048transition: 0.5s;
049-moz-transform-origin: 0px 0px;
050-moz-transform: rotateX(-80deg);
051-webkit-transform-origin: 0px 0px;
052-webkit-transform: rotateX(-90deg);
053-o-transform-origin: 0px 0px;
054-o-transform: rotateX(-90deg);
055transform-origin: 0px 0px;
056transform: rotateX(-90deg);
057-moz-backface-visibility: hidden;
058-webkit-backface-visibility: hidden;
059-o-backface-visibility: hidden;
060backface-visibility: hidden;
061}
062.menuHolder ul.nav div.left {left:auto; right:4px;}
063.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;
064-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
065-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
066-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
067box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
068}
069.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
070.menuHolder ul.nav div ul.colRight {margin-right:10px;}
071.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
072.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
073.menuHolder ul.nav div ul li:last-child {border:0;}
074.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;}
075.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url("arrow.gif") no-repeat 1px center;}
076.menuHolder ul.nav div.col1 {width:160px;}
077.menuHolder ul.nav div.col2 {width:310px;}
078.menuHolder ul.nav div.col3 {width:460px;}
079.menuHolder ul.nav li:hover div {
080-moz-transform: rotateX(0deg);
081-webkit-transform: rotateX(0deg);
082-o-transform: rotateX(0deg);
083transform: rotateX(0deg);
084}
085 
086</style>
087</head>
088<body>
089<div>http://www.webkfa.com/</div>
090<div class="menuHolder">
091<ul class="nav">
092<li><a class="top-a" href="#url"><b>Home</b></a></li>
093<li><a class="top-a" href="#url"><b>Resort</b></a>
094<div class="col3">
095<ul class="colLeft">
096<li><a href="#url">Ski Slopes</a></li>
097<li><a href="#url">Night Life</a></li>
098<li><a href="#url">Ski Hire Facilities</a></li>
099</ul>
100<ul class="col">
101<li><a href="#url">Snow Hotel</a></li>
102<li><a href="#url">Ice Cavern</a></li>
103<li><a href="#url">Ski Inn</a></li>
104</ul>
105<ul class="colRight">
106<li><a href="#url">Advanced Skills</a></li>
107<li><a href="#url">Beginners Slopes</a></li>
108<li><a href="#url">Intermediate Slopes</a></li>
109<li><a href="#url">Expert</a></li>
110</ul>
111</div>
112</li>
113<li><a class="top-a" href="#url"><b>Information</b></a>
114<div class="col2">
115<ul class="colLeft">
116<li><a href="#url">Lift Passes</a></li>
117<li><a href="#url">Insurance</a></li>
118<li><a href="#url">Snow Report</a></li>
119<li><a href="#url">Gear Rental</a></li>
120</ul>
121<ul class="colRight">
122<li><a href="#url">Boots</a></li>
123<li><a href="#url">Skis</a></li>
124<li><a href="#url">Goggles</a></li>
125</ul>
126</div>
127</li>
128<li><a class="top-a" href="#url"><b>Contact</b></a>
129<div class="col1">
130<ul class="colSingle">
131<li><a href="#url">Email</a></li>
132<li><a href="#url">Telephone</a></li>
133<li><a href="#url">Online Form</a></li>
134</ul>
135</div>
136</li>
137<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
138<li><a class="top-a" href="#url"><b>Nearby</b></a>
139<div class="col2 left">
140<ul class="colLeft">
141<li><a href="#url">Where to go</a></li>
142<li><a href="#url">What to do</a></li>
143<li><a href="#url">Places of interest</a></li>
144</ul>
145<ul class="colRight">
146<li><a href="#url">Snow Hotel</a></li>
147<li><a href="#url">The Snowman</a></li>
148<li><a href="#url">Ice Cavern</a></li>
149<li><a href="#url">Ski Inn</a></li>
150</ul>
151</div>
152</li>
153</ul>
154</div>
155</body>
156</html>

相关文章

最新发布

阅读排行

热门文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1