<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@-webkit-keyframes open{
0%{
-webkit-transform: rotateX(-120deg);
}
25%{
-webkit-transform: rotateX(30deg);
}
50%{
-webkit-transform: rotateX(-15deg);
}
75%{
-webkit-transform: rotateX(8deg);
}
100%{
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes close{
0%{
-webkit-transform: rotateX(0deg);
}
100%{
-webkit-transform: rotateX(-120deg);
}
}
body{
margin: 0;
}
#wrap{
width: 250px;
margin: 30px auto;
position: relative;
-webkit-perspective: 800px;
}
#wrap h2{
height: 40;
background: #F76300;
color: #FFFFFF;
font: bold 16px/40px "微软雅黑";
text-align: center;
margin: 0;
position: relative;
z-index: 10;
}
#wrap div{
width: 100%;
position: absolute;
top:32px;
left: 0;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin: top;
-webkit-transform: rotateX(-120deg);
}
#wrap span{
display: block;
height: 30px;
background: #9f0;
font: 12px/30px "宋体";
color: #FFFFFF;
text-indent: 20px;
box-shadow:inset 0 0 0 20px rgba(0,0,0,1);
transition: 1s;
}
#wrap>div{
top: 40px;
}
input{
position: absolute;
}
#wrap .show{
-webkit-animation:2s open;
-webkit-transform: rotateX(0deg)
}
#wrap .show>span{
box-shadow:inset 0 0 0 20px rgba(0,0,0,0);
}
#wrap .hide{
-webkit-animation: 0.8s close;
-webkit-transform: rotateX(-120deg)
}
</style>
</head>
<body>
<input id="btn" type="button" value="我是按钮"/>
<div id="wrap">
<h2>我是标题</h2>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = function(){
var oInp = document.getElementById("btn");
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByTagName("Div");
var timer = null;
var iNow = 0;
var onOff =true;
oInp.addEventListener("click",function(){
if (onOff) {
iNow = 0
timer = setInterval(function(){
aDiv[iNow].className = "show";
iNow++;
if (iNow == aDiv.length) {
clearInterval(timer);
onOff = !onOff;
}
},200)
} else{
iNow = aDiv.length-1;
timer = setInterval(function(){
aDiv[iNow].className = "hide";
iNow--;
if (iNow < 0) {
clearInterval(timer);
onOff = !onOff;
}
},200)
}
})
}
</script>
</body>
</html>
posted on
