<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>胶卷式放映</title>
<style type="text/css" id="style1">
* {
margin: 0;
padding: 0
}
body{
background: black;
}
#wrap {
150px;
height: 120px;
margin: 200px auto;
perspective: 2000px;
}
#wrap ul {
100%;
height: 100%;
transform-style: preserve-3d;
animation:move 12s 3.2s infinite ;
}
#wrap ul li {
top: 0;
left: 0;
position: absolute;
148px;
height: 118px;
line-height: 118px;
text-align: center;
font-size: 118px;
background: grey;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
border-radius: 5px;
overflow: hidden;
}
.shadow{
1200px;
height: 1200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -600px;
margin-top: -600px;
background: radial-gradient(600px 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0));
transform: rotateX(90deg) translateZ(-150px);
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li> ！</li>
<li>群</li>
<li>22 </li>
<li>落</li>
<li>部</li>
<li>习</li>
<li>学</li>
<li>端</li>
<li>前</li>
<li>群</li>
<li>加</li>
<li>书</li>
<li>子</li>
<li>电</li>
<li>习</li>
<li>学</li>
<li>端</li>
<li>前</li>
</ul>
<div class="shadow"></div>
</div>
</body>
</html>
<script>
var oLis = document.querySelectorAll("#wrap li");
var oStyle = document.querySelector("#style1");
var len=oLis.length;
var aaa=null;
for (var i = 1; i <=len; i++) {
(function(i){
window.setTimeout(function(){
oStyle.innerHTML
+= " #wrap ul li:nth-child("
+ i
+ "){transform:rotateY("
+(len-i) * (360/len)
+ "deg) translateZ(500px);transition:0.7s;transition-delay:"
+(i*0.1)
+"s}";
},100);
})(i);
}
for(i=0;i<=len;i++){
aaa+=100/len*i+"%{transform: rotateY("+-360/len*i+"deg);}"
}
oStyle.innerHTML+="@keyframes move {"+aaa+"}";
</script>