超级漂亮的css3动画折纸目录

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前端ABC-折叠导航</title>
    <style>
        body{margin: 0;}
        @-webkit-keyframes show {
            0%{
                -webkit-transform: rotateX(-90deg);
            }
            30%{
                -webkit-transform: rotateX(45deg);
            }
            60%{
                -webkit-transform: rotateX(-30deg);
            }
            100%{
                -webkit-transform: rotateX(0deg);
            }

        }
        @-webkit-keyframes hidden {
            0%{
                -webkit-transform: rotateX(0deg);
            }
            30%{
                -webkit-transform: rotateX(-30deg);
            }
            60%{
                -webkit-transform: rotateX(-60deg);
            }
            100%{
                -webkit-transform: rotateX(-120deg);
            }
        }
        #wrap{ width: 160px;margin: 30px auto;position: relative;color: #fff;-webkit-transform-style: preserve-3d;perspective: 800px;}
        #wrap h2{height:40px;width: 100%;background: #0e7277;line-height: 40px;font-size: 20px;font-weight: 600;position: relative;z-index: 10;}
        #wrap div{height: auto;width:100%;position: absolute;top:32px;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(-90deg);-webkit-transform-origin: top;}
        #wrap span{display: block;width:100%; height:30px;line-height: 30px;background: plum;transition: 1s;box-shadow: inset 0 0 0 20px rgba(0,0,0,1)}
        #wrap .show{-webkit-animation: 2s show;-webkit-transform: rotateX(0deg)}
        #wrap .hidden{-webkit-animation: 2s hidden;-webkit-transform: rotateX(-120deg)}
        #wrap>div:nth-child(1){top:40px;}
        #wrap .show>span{box-shadow: inset 0 0 0 20px rgba(0,0,0,0);}
        #btn{position: absolute;left:20%;}
    </style>
    <script>
        window.onload=function () {
            var btn = document.getElementById('btn');
            var wrap = document.getElementById('wrap');
            var aDiv = wrap.getElementsByTagName('div');
            var timer = null;
            btn.onOff = true;
            btn.onclick = function () {
                console.log(btn.onOff,timer)
                if(timer){
                    return;
                }
                if(btn.onOff){
                    btn.onOff = false;
                    var n=0;
                    timer = setInterval(function () {
                        aDiv[n].className='show';
                        n++;
                        if(n>=aDiv.length){
                            clearInterval(timer);
                            timer = null;
                        }
                    },200)

                }else{
                    console.log(2);
                    var n=aDiv.length-1;
                    btn.onOff = true;
                    timer = setInterval(function () {
                        aDiv[n].className = 'hidden';
                        n--;
                        if(n<0){
                            clearInterval(timer);
                            timer = null;
                        }
                    },200)
                }
            }

        }
    </script>
</head>
<body>
<input type="button" id="btn" value="点我">
<div  id="wrap">
    <h2>这是大标题</h2>
    <div style="" >
        <span>标题一</span>
        <div   style="" >
            <span>标题二</span>
            <div>
                <span>标题三</span>
                <div>
                    <span>标题四</span>
                    <div>
                        <span>标题五</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 超级漂亮的css3动画折纸目录

赞 (2)
分享到:更多 ()

发表评论 0