您的位置：首页 > Web前端 > CSS

CSS3实现折纸效果

2016-05-04 14:55 260 查看

1.折纸布局很特别：

DIV里套DIV，主要为了在实现折叠时，能够连接起来，中间不会开出一条缝，一种很巧妙的方式

<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 style="">
<span>选项7</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

#wrap div{ position:absolute<span style="color:#ff0000;">;top:32px</span>; width:100%;left:0; -webkit-transform-style:preserve-3d; -webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}

因为DIV是嵌套的，top是相对于上一个DIV，就可以实现连接竖向排列

3.实现向下运动渐变的效果，使用了box-shadow

#wrap span{ display:block;height:30px;background:#9F0; font:12px/30px "宋体"; color:#fff; text-indent:20px; <span style="color:#ff0000;">box-shadow:inset 0 0 0 20px rgba(0,0,0,1); transition:1s</span>;}

4.防止按钮点击多次，速度加快

if(oTimer)//已经开启，什么都不做
{
return;
}

clearInterval(oTimer);
oTimer=null;

整体代码:

<!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(30deg);
}
50%
{
-webkit-transform:rotateX(-15deg);
}
75%
{
-webkit-transform:rotateX(8deg);
}
100%
{
-webkit-transform:rotateX(0deg);
}
}
@-webkit-keyframes clos
{
0%
{
-webkit-transform:rotateX(0deg);
}
100%
{
-webkit-transform:rotateX(-120deg);
}
}
body{margin:0;}
#wrap{ width:160px;margin:30px auto; position:relative; -webkit-perspective:800px;}
#wrap h2{ height:40px;background:#F60; color:#fff; font: bold 16px/40px "微软雅黑"; text-align:center;margin:0; position:relative;z-index:10;}
#wrap div{ position:absolute;top:32px; width:100%;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:#fff; text-indent:20px; box-shadow:inset 0 0 0 20px rgba(0,0,0,1); transition:1s;}
#wrap>div{top:40px;}
#wrap .show{-webkit-animation:2s open;-webkit-transform:rotateX(0deg);}
#wrap .hide{-webkit-animation:0.8s clos;-webkit-transform:rotateX(-120deg);}
#wrap .show>span{ box-shadow:inset 0 0 0 20px rgba(0,0,0,0);}
#btn{ position:absolute;}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<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 style="">
<span>选项7</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var oBtn=document.getElementById("btn");
var oWrap=document.getElementById("wrap");
var aDiv=oWrap.getElementsByTagName("div");
var iDelay=200;
var oTimer=null;
var i=0;
var bOff=true;
oBtn.onclick=function()
{
if(oTimer)//已经开启，什么都不做
{
return;
}
if(bOff)
{
i=0;
oTimer=setInterval(function(){
aDiv[i].className="show";
i++;
if(i==aDiv.length)
{
clearInterval(oTimer);
oTimer=null;
bOff=false;
}
},iDelay);
}
else
{
i=aDiv.length-1;
oTimer=setInterval(function(){
aDiv[i].className="hide";
i--;
if(i<0)
{
clearInterval(oTimer);
bOff=true;
oTimer=null;
}
},iDelay);
}
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航