C3折纸效果
2017-09-05 本文已影响0人
LorenaLu
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>折纸效果</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>
<div class="produter">
<a class="main" href="#">产品</a>
<div class="sub first ">
<p>
<span>旅行</span>
<a href="#">旅行</a> 可以消除人们的疲惫，带上家人一起享受这份悠闲的生活
</p>
<div class="sub even ">
<p>
<span>Track and Beyond</span>
<a href="#">W3C</a> is currently creating standards that
</p>
<div class="sub odd ">
<p><span>北京</span>At the same time, public awareness of online privacy issues has increased.</p>
<div class="sub even ">
<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 ">
<p><span>Beyond</span><a href="#">旅行</a>可以消除人们的疲惫，带上家人一起享受这份悠闲的生活</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
