CSS3折叠菜单，折纸效果的菜单

2020-01-27 14:17:28

字体：大中小

来源：转载

供稿：网友

CSS3折纸效果的菜单，一个比较有新意的折叠菜单，就像我们把纸折叠一样，有层次感，有明显的折痕。编写时利用3d场景，如perspective透视、perspective-origin、transform、transition等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:702px;margin:0 auto;line-height:24px;padding-top:10px;}.bredcolor{color:#fff;}.produter {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;	-webkit-perspective:400px;	-moz-perspective:400px;	perspective:400px;	-webkit-perspective-origin: 50% 100%;	-moz-perspective-origin: 50% 100%;	perspective-origin: 50% 100%;}/* produter下所有div的统一设置 */.produter div {position:absolute; padding:10px;	-webkit-transform-style:preserve-3d;	-moz-transform-style:preserve-3d;	transform-style:preserve-3d;	top:100%; left:0; width:230px;	-webkit-transform-origin: 0 0;	-moz-transform-origin: 0 0;	transform-origin: 0 0;}.produter .odd {background:#ddd;	-moz-transform:rotateX(-180deg);	-webkit-transform:rotateX(-180deg);	-webkit-transition: 1s;	-moz-transition: 1s;	-o-transition: 1s;	transition: 1s;}.produter .even {background:#eee;	-moz-transform:rotateX(180deg);	-webkit-transform:rotateX(180deg);	-webkit-transition: 1s;	-moz-transition: 1s;	-o-transition: 1s;	transition: 1s;}.produter .first {background:#ddd;	-moz-transform:rotateX(-100deg);	-webkit-transform:rotateX(-100deg);	-webkit-transition: 0.6s;	-moz-transition: 0.6s;	-o-transition: 0.6s;	transition: 0.6s;}.produter .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}.produter:hover .sub {	-moz-transform:rotateX(0deg);	-webkit-transform:rotateX(0deg);}.produter .sub img {display:block; float:left; padding:0 10px 10px 0;}.produter .sub p {font: normal 12px/15px arial, sans-serif; color:#000; padding:0; margin:0;}.produter .sub p span {display:block; font: bold 14px/18px arial, sans-serif; color:#ea0;}.produter .sub p a {font: normal 12px/15px arial, sans-serif; color:#09c;}.produter .sub p a:hover {text-decoration:none;}.produter a.main {display:block; font: bold 15px/35px arial, sans-serif; text-align:center; text-decoration:none; color:#fff; background:#069; border-radius:10px 10px 0 0; position:relative; z-index:100;}</style></head><body><section class="tips">	一个比较有新意的折叠菜单，就像我们把纸折叠一样，有层次感，有明显的折痕。<br>	qq群:197326136<br></section><div class="produter"><a class="main" href="#url">产品</a>	<div class="sub first"><img src="/d/file/p/2020/01-27/682685f3868454df61e921713b78fd11.png" alt=""><p><span>旅行</span><a href="#">旅行</a>可以消除人们的疲惫，带上家人一起享受这份悠闲的生活</p>	<div class="sub even"><img src="/d/file/p/2020/01-27/29f65bcb723a7de8e92523f7ed077caa.png" alt=""><p><span>Track and Beyond</span><a href="#">W3C</a> is currently creating standards that</p>	<div class="sub odd"><img src="/d/file/p/2020/01-27/d4430c1e6bd6d5f91c6e991ea5996810.png" alt=""><p><span>北京</span>At the same time, public awareness of online privacy issues has increased.</p>	<div class="sub even"><img src="/d/file/p/2020/01-27/584970d17815a3f0933a39c3ce5b168b.png" alt=""><p><span>Track</span>There is no fee to participate in this Workshop and W3C Membership is not required.</p>	<div class="sub odd last"><img src="/d/file/p/2020/01-27/35c566a0c2b07da093336c09a480bbad.png" alt=""><p><span>Beyond</span><a href="#">旅行</a>可以消除人们的疲惫，带上家人一起享受这份悠闲的生活</p>	</div></div></div></div></div></div></body></html>

上一篇：CSS3制作凤凰网导航

下一篇：CSS3制作漂亮的3D表单