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

web前端群，189394454，有视频、源码、学习方法等大量干货分享

👇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>