html5菜单折纸效果_html5教程技巧
程序员文章站
2022-04-07 22:06:16
...
类似猎豹浏览器安装时的用户须知效果。
点击后效果
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>fold paper effect by gt-柯乐义</title> <style> #wrapper { -webkit-perspective: 55cm; -webkit-perspective-origin: 50% 50%; text-align: center; } .paper { position: relative; height: 40px; width: 5em; margin: 0; background-color: aqua; -webkit-transition: -webkit-transform 1s linear; } </style> <script type="text/javascript"> window.angel = 0; window.timer; function fold() { var foldUp = document.getElementById("foldUp"); var foldDown = document.getElementById("foldDown"); var down = document.getElementById("down"); if (window.angel == 0) { window.timer = setInterval(function() { var diff = different(-1, 20); console.log(foldUp.offsetTop) move(foldUp, diff, 1); move(foldDown, diff, 3); move(down, diff, 4); }, 40); setTimeout(function() { clearInterval(window.timer); foldUp.style.top = "-20px"; foldDown.style.top = "-60px"; down.style.top = "-80px"; window.angel = -90; }, 1030); foldUp.style.webkitTransform = "rotateX(-90deg)"; foldDown.style.webkitTransform = "rotateX(90deg)"; } else if (angel == -90) { window.timer = setInterval(function() { var diff = different(1, 20); console.log(foldUp.offsetTop) move(foldUp, diff, 1); move(foldDown, diff, 3); move(down, diff, 4); }, 40); setTimeout(function() { clearInterval(window.timer); foldUp.style.top = "0"; foldDown.style.top = "0"; down.style.top = "0"; window.angel = 0; }, 1030); foldUp.style.webkitTransform = "rotateX(0deg)"; foldDown.style.webkitTransform = "rotateX(0deg)"; } else { console.log(window.angel) } } function positionValue(p, type) {// 得到css带单位的值 var str = p.style[type]; str = str.substring(0, str.length - 2); var value = parseInt(str); if (isNaN(value)) { value = 0; } return value; } function move(p, different, time) { var top = positionValue(p, "top"); p.style.top = top + different * time + "px"; } function different(direction, height) { var lastAngel = window.angel; window.angel += 3.6 * direction; var different = Math .ceil((Math.cos(window.angel / 180 * Math.PI) - Math .cos(lastAngel / 180 * Math.PI)) * height * 100) / 100; return different; } </script> </head> <body> <p id="wrapper"> <p id="up" class="paper"> g </p> <p id="foldUp" class="paper"> n </p> <p id="foldDown" class="paper"> b </p> <p id="down" class="paper"> t </p> </p> <button onclick=fold();> fold </button> </body> </html>