css3三维动画菜单上下翻转

2024-09-05 12:17:20

字体：大中小

来源：转载

供稿：网友

三维阴影效果的CSS3动画菜单，运用纯CSS3技术实现的菜单，好酷呀的菜单，那些阴影和圆角都是用CSS3实现的哦，没有使用图片修饰啊，学习CSS3的朋友，可不要错过本示例哦，希望大家喜欢。

<!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("http://www.vevb.com/jscss/demoimg/201208/arrow.gif") no-repeat left center;}.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url("http://www.vevb.com/jscss/demoimg/201208/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 class="menuHolder">	<ul class="nav">		<li><b>Home</b></li>		<li><b>Resort</b>		<div class="col3">			<ul class="colLeft">				<li>Ski Slopes</li>				<li>Night Life</li>				<li>Ski Hire Facilities</li>			</ul>			<ul class="col">				<li>Snow Hotel</li>				<li>Ice Cavern</li>				<li>Ski Inn</li>			</ul>			<ul class="colRight">				<li>Advanced Skills</li>				<li>Beginners Slopes</li>				<li>Intermediate Slopes</li>				<li>Expert</li>			</ul>		</div>		</li>		<li><b>Information</b>		<div class="col2">			<ul class="colLeft">				<li>Lift Passes</li>				<li>Insurance</li>				<li>Snow Report</li>				<li>Gear Rental</li>			</ul>			<ul class="colRight">				<li>Boots</li>				<li>Skis</li>				<li>Goggles</li>			</ul>		</div>		</li>		<li><b>Contact</b>		<div class="col1">			<ul class="colSingle">				<li>Email</li>				<li>Telephone</li>				<li>Online Form</li>			</ul>		</div>		</li>		<li><b>Privacy</b></li>		<li><b>Nearby</b>		<div class="col2 left">			<ul class="colLeft">				<li>Where to go</li>				<li>What to do</li>				<li>Places of interest</li>			</ul>			<ul class="colRight">				<li>Snow Hotel</li>				<li>The Snowman</li>				<li>Ice Cavern</li>				<li>Ski Inn</li>			</ul>		</div>		</li>	</ul></div></body></html>

上一篇：CSS3制作的图片3D旋转特效

下一篇：css3使用transform属性制作js弹性运动