<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@-webkit-keyframes open{
0%{
-webkit-transform: rotateX(-120deg);
}
40%{
-webkit-transform: rotateX(30deg);
}
60%{
-webkit-transform: rotateX(-20deg);
}
80%{
-webkit-transform: rotateX(10deg);
}
100%{
-webkit-transform: rotateX(0deg);
}
}
.wrap{
margin: 30px auto;
300px;
-webkit-perspective: 800px;
position: relative;
}
.wrap h2{
line-height: 50px;
background-color: #f03;
text-align: center;
color: #fff;
position: relative;
z-index: 2;
}
.wrap div{
position:absolute;
top: 32px;
left: 0;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: top;
-webkit-transform: rotateX(-120deg);
transition: .5s;
}
.wrap>div{
top:50px;
}
.wrap span{
display: block;
300px;
line-height: 30px;
background-color: #6f3;
text-indent: 15px;
color: #fff;
transition: .5s;
box-shadow: inset 0 0 30px 20px rgba(0,0,0,1);
}
.wrap .open{
-webkit-animation: open 2s;
-webkit-transform: rotateX(0deg);
}
.wrap .open>span{
box-shadow: inset 0 0 30px 10px rgba(0,0,0,0);
}
.wrap span:hover{
text-indent: 30px;
background-color: #ff0;
}
</style>
</head>
<body>
<input type="button" value="展开"/>
<input type="button" value="收缩"/>
<div class="wrap" id="list">
<h2>新闻列表</h2>
<div>
<span>发展经济要以人民为“圆点“</span>
<div>
<span>新时代的文化自信从哪里来？ </span>
<div>
<span>元旦假期要来了，这6件事儿要知道</span>
<div>
<span>最高检发布禁酒令</span>
<div>
<span>广西禁毒大案</span>
<div>
<span>杭二中这幢百年旧楼里 </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var oList = document.getElementById('list');
var aDiv = oList.getElementsByTagName('div');
var aBtn = document.getElementsByTagName('input');
var oTimer = null;
//收缩
aBtn[1].onclick = function(){
var i=aDiv.length-1;
clearInterval(oTimer);
oTimer = setInterval(function(){
aDiv[i].className = '';
i--;
if(i<0){
clearInterval(oTimer);
}
},100);
}
//展开
aBtn[0].onclick = function(){
var i=0;
clearInterval(oTimer);
oTimer = setInterval(function(){
aDiv[i].className = 'open';
i++;
if(i==aDiv.length){
clearInterval(oTimer);
}
},100);
}
</script>
</html>