html5菜单折纸效果_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5菜单折纸效果_html5教程技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2355字,纯文字阅读大概需要4分钟。
内容图文
![html5菜单折纸效果_html5教程技巧](/upload/InfoBanner/zyjiaocheng/391/f81cfd4a7c88450790a773a73b52c2d3.jpg)
![html5菜单折纸效果_html5教程技巧 - 文章图片](/upload/getfiles/0001/2021/4/23/20210423044831249.jpg)
点击后效果
代码如下:
<!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>
内容总结
以上是互联网集市为您收集整理的html5菜单折纸效果_html5教程技巧全部内容,希望文章能够帮你解决html5菜单折纸效果_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。