<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open {
0% {
-webkit-transform: rotateX(-120deg);
}
25% {
-webkit-transform: rotateX(25deg);
}
50% {
-webkit-transform: rotateX(-15deg);
}
75% {
-webkit-transform: rotateX(10deg);
box-shadow: inset 0 0 0 0 #ccc;
}
100% {
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes clos {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-120deg);
}
}
.wrap {
width: 240px;
position: relative;
-webkit-perspective: 800px;
margin: 0 auto;
}
.wrap h3 {
margin: 0;
height: 40px;
background: #f60;
color: #fff;
line-height: 40px;
text-align: center;
font-size: 16px;
position: relative;
z-index: 10;
}
.wrap div {
position: absolute;
top: 30px;
left: 0;
-webkit-transform-style: preserve-3d;
width: 100%;
-webkit-transform-origin: top;
-webkit-transform: rotateX(-120deg);
z-index: 1;
}
.wrap>div:nth-of-type(1) {
top: 40px;
}
.wrap span {
display: block;
height: 28px;
background: aquamarine;
color: #fff;
font: 14px/28px "宋体";
text-indent: 20px;
box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1);
transition: 1s;
}
.wrap .open {
-webkit-transform: rotateX(0deg);
-webkit-animation: 5s open ease-in-out;
}
.wrap .open>span {
box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0);
}
.wrap .clos {
-webkit-transform: rotateX(-120deg);
-webkit-animation: 0.7s clos ease-in-out;
}
.wrap .clos>span {
box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1);
}
#btn {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 30px;
transition: 1s;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oWrap = document.getElementById("wrap");
var aDiv = oWrap.getElementsByTagName("div");
var i = 0;
var oTimer = null;
var iDelay = 200;
var Boff = true;
oBtn.onclick = function () {
oBtn.style.left = "-300px";
if (Boff) {
i = 0;
oTimer = setInterval(function () {
aDiv[i].className = "open";
if (i == aDiv.length - 1) {
clearInterval(oTimer);
oBtn.style.left = "0px";
oBtn.value = "关闭";
}
i++;
}, iDelay);
}
else {
i = aDiv.length - 1;
oTimer = setInterval(function () {
aDiv[i].className = "clos";
if (i == 0) {
clearInterval(oTimer);
oBtn.style.left = "0px";
oBtn.value = "展开";
}
i--;
}, 100);
}
Boff = !Boff;
};
};
</script>
</head>
<body>
<input type="button" value="展开" id="btn" />
<div class="wrap" id="wrap">
<h3>这是标题</h3>
<div>
<span>选项1</span>
<div>
<span>选项2</span>
<div>
<span>选项3</span>
<div>
<span>选项4</span>
<div>
<span>选项5</span>
<div>
<span>选项6</span>
<div>
<span>选项7</span>
<div>
<span>选项8</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
