CSS3+JavaScript效果：胶卷式放映
<!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 { 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 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0)); transform: rotateX(90deg) translateZ(-150px); } </style> </head> <body>
- ！
- 群
- 22
- 落
- 部
- 习
- 学
- 端
- 前
- 群
- 加
- 书
- 子
- 电
- 习
- 学
- 端
- 前
</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>需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833 【内容展示有限，更多学习资料可以加群下载，群文件会定期更新学习资料，以及练手小案例】
