web前端案例-制作搜索框折纸特效

用css加javascript制作的折纸特效，代码只有150行，下面附上源码，小伙伴们可以用来练习一下。

文章分享之前小编推荐一下我的前端学习群：575308719，里面都是学习前端的，如果你想制作酷炫的特效，想学习前端知识，小编欢迎你的加入。小编会在群中不定期分享干货源码，包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

?html代码：

<div class="warp">
<input type="text" id="btn">
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div style="">
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
<div>
<span>学习web前端折纸特效</span>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>

?css代码：
<style>
*{margin:0;padding:0;}
html{height:100%;}
body{background:linear-gradient(#ffffff,#000033);height:100%;}
@keyframes open{
0%{transform:rotateX(-120deg);}
25%{transform:rotateX(30deg);}
50%{transform:rotateX(-45deg)}
75%{transform:rotateX(8deg)}
100%{transform:rotateX(0deg);}
}
@keyframes close{
0%{transform:rotateX(0deg);}

100%{transform:rotateX(-120deg);}
}

.warp{
width:500px;
margin:100px auto;
perspective:800px;/*眼球距离物体的远近*/

}
.warp .show{
transform:rotateX(0);
animation:open 2s ease-in;
}
.warp .hide{
transform:rotateX(-120deg);
animation:close 0.6s ease;
}
#btn{
width:498px;
height:38px;
position:absolute;
left:0;
top:0;
z-index:100;
}

.warp div{
width:100%;
transform-style:preserve-3d;
position:absolute;
top:46px;
left:0;
border-bottom:1px dotted #ccc;
transform-origin:top;/*上旋转轴*/
transform:rotateX(-120deg);
z-index:1;

}

.warp>div:nth-of-type(1){top:44px;}
.warp span{
height:40px;
display:block;
background:linear-gradient(#fff,blue);
text-align:center;
line-height:40px;
transition:1s;
}
</style>

?javascript代码：
<script>
window.onload =function(){
var oBtn = document.getElementById('btn');
var oWarp = document.getElementsByClassName('warp')[0];
var oDiv = oWarp.getElementsByTagName('div');
var i = 0;
var oTimer = null;
var Boff = true;
var iDlay = 200;
oBtn.onclick =function(){
if(Boff){
i=0;
oTimer = setInterval(function(){

oDiv[i].className = 'show';
if(i==oDiv.length-1){
clearInterval(oTimer)
}
i++;
},iDlay)
Boff = true;
}else
{
i=oDiv.length-1;
oTimer = setInterval(function(){
oDiv[i].className = 'hide';
if(i==0){
clearInterval(oTimer)
}
i--;
},iDlay)
Boff = false;
}

Boff=!Boff
}

}
</script>