首页 > 代码库 > 11111
11111
<!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> <div id="wrap"> <ul> <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>是</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>
11111
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。