前端ABC<!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动画折纸目录