3D效果的折疊導航或列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@-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);
}
}
*{margin: 0;padding: 0;}
#web{width: 500px;margin: 30px auto;}
#wrap{width: 160px;position: relative;-webkit-perspective:800px;display: inline-block;margin: 30px auto; }
#wrap h2{width: 160px;height: 40px;background:steelblue;text-align: center;color: white;font-size: 20px;line-height: 40px;position:relative;z-index:10;}
#wrap div{
position:absolute;top: 32px;left:0;width: 100%;-webkit-transform-origin: top;-webkit-transform-style: preserve-3d;-webkit-transform:rotateX(-120deg);
}
#wrap>div{top:40px;}
#wrap span{display:block;height:30px;background:#00BFFF; font:12px/30px "宋體"; color:#fff; text-indent:20px;box-shadow:inset 0 0 0 20px rgba(29,140,253,1);transition: 1s;}
#wrap .show{-webkit-animation:2s open;-webkit-transform:rotateX(0deg);}
#wrap .hide{-webkit-animation:0.8s close;-webkit-transform:rotateX(-120deg);}
#wrap .show>span{box-shadow:inset 0 0 0 20px rgba(29,140,253,0);}
#btn{width: 60px;height: 30px;line-height: 30px; text-align: center;background: deepskyblue;color: white;border-radius: 6px;margin: 50px auto;display: inline-block;}
#btn:hover{background:salmon;}
</style>
</head>
<body>
<!--<input type="button" id="btn" value="按鈕" />-->
<div id="web">
<div id="btn">按鈕</div>
<div id="wrap">
<h2>這是標題</h2>
<div>
<span>選項一</span>
<div>
<span>選項二</span>
<div>
<span>選項三</span>
<div>
<span>選項四</span>
<div>
<span>選項五</span>
<div>
<span>選項六</span>
<div>
<span>選項七</span>
<div>
<span>選項八</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var oBtn=document.getElementById(‘btn‘);
var oWrap=document.getElementById(‘wrap‘);
var aDiv=oWrap.getElementsByTagName(‘div‘);
var iDelay=200;
var i=0;
var oTiem=null;
var off=true;
oBtn.onclick=function(){
if(oTiem){
return;
}
if(off){
i=0;
oTiem=setInterval(function(){
aDiv[i].className="show";
i++
if(i==aDiv.length){
clearInterval(oTiem);
oTiem=null;
off=false;
}
},iDelay);
}else{
i=aDiv.length-1;
oTiem=setInterval(function(){
aDiv[i].className="hide";
i--;
if(i<0)
{
clearInterval(oTiem);
off=true;
oTiem=null;
}
},iDelay);
}
};
</script>
3D效果的折疊導航或列表