CSS3 종이접기 효과

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>

2.
4

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

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3 종이접기 효과

좋은 웹페이지 즐겨찾기