CSS3+JavaScript效果：胶卷式放映

来源：互联网发布：udp端口编辑：程序博客网时间：2024/04/30 15:03

<!DOCTYPE html>

<html>

<title>胶卷式放映</title>

* {

margin: 0;

padding: 0

}

body{

background: black;

}

#wrap {

width: 150px;

height: 120px;

margin: 200px auto;

perspective: 2000px;

}

#wrap ul {

width: 100%;

height: 100%;

transform-style: preserve-3d;

animation:move 12s 3.2s infinite ;

}

#wrap ul li {

top: 0;

left: 0;

position: absolute;

width: 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{

width: 1200px;

height: 1200px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -600px;

margin-top: -600px;

background: radial-gradient(600px 600pxat center,rgba(50,50,50,0.8),rgba(0,0,0,0));

transform: rotateX(90deg) translateZ(-150px);

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

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 ulli: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>

需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】

0 0