滚筒效果

来源：互联网发布：github客户端 for mac 编辑：程序博客网时间：2024/04/28 21:07

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap{width: 320px;border: 1px solid #999;margin: 20px auto;} #wrap div{width: 100%;height: 40px;text-align: center;border-bottom: 1px solid lightgray;background: cyan; transform: rotateX(90deg); transition:all 1s cubic-bezier(1, 1.75, 0.88,-0.08); transform-origin: top; } span{display: block;line-height: 40px;} /*#wrap:hover div{transform: rotateX(0);}*/ </style> </head> <body> <div id="wrap"> <div><span>sapn1</span></div> <div><span>sapn2</span></div> <div><span>sapn3</span></div> <div><span>sapn4</span></div> <div><span>sapn5</span></div> <div><span>sapn6</span></div> <div><span>sapn7</span></div> <div><span>sapn8</span></div> <div><span>sapn9</span></div> <div><span>sapn10</span></div> <div><span>sapn11</span></div> <div><span>sapn12</span></div> </div> </body> <script type="text/javascript"> var wrap = document.getElementById('wrap'); var divs = wrap.getElementsByTagName('div'); wrap.onclick = function(){ for (var i = 0; i < divs.length; i++) { divs[i].style.transform = 'rotateX(0)'; divs[i].style.transitionDelay = i*0.3 + 's'; } } </script> </html>

0 0