3D效果的折叠导航或列表
Posted 拥之则安丶伴之则暖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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效果的折叠导航或列表的主要内容，如果未能解决你的问题，请参考以下文章
Unity实用小工具或脚本——可折叠伸缩的多级（至少三级）内容列表（类似于Unity的Hierarchy视图中的折叠效果）