html5菜单折纸效果

全栈程序员站长

发布于 2022-07-15 13:57:15

1.9K0

发布于 2022-07-15 13:57:15

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是全栈君

类似猎豹浏览器安装时的用户须知效果。

html文件代码，保存为html文件打开：

  1 <!DOCTYPE html>
  2 <html>
  3  <head>
  4   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5   <title>fold paper effect by gt-柯乐义</title>
  6   <style>
  7 #wrapper {
  8  -webkit-perspective: 55cm;
  9  -webkit-perspective-origin: 50% 50%;
 10  text-align: center;
 11 }
 12 .paper {
 13  position: relative;
 14  height: 40px;
 15  width: 5em;
 16  margin: 0;
 17  background-color: aqua;
 18  -webkit-transition: -webkit-transform 1s linear;
 19 }
 20 </style>
 21   <script type="text/javascript">
 22  window.angel = 0;
 23  window.timer;
 24  function fold() {
 25   var foldUp = document.getElementById("foldUp");
 26   var foldDown = document.getElementById("foldDown");
 27   var down = document.getElementById("down");
 28   if (window.angel == 0) {
 29    window.timer = setInterval(function() {
 30     var diff = different(-1, 20);
 31     console.log(foldUp.offsetTop)
 32     move(foldUp, diff, 1);
 33     move(foldDown, diff, 3);
 34     move(down, diff, 4);
 35    }, 40);
 36    setTimeout(function() {
 37     clearInterval(window.timer);
 38     foldUp.style.top = "-20px";
 39     foldDown.style.top = "-60px";
 40     down.style.top = "-80px";
 41     window.angel = -90;
 42    }, 1030);
 43    foldUp.style.webkitTransform = "rotateX(-90deg)";
 44    foldDown.style.webkitTransform = "rotateX(90deg)";
 45   } else if (angel == -90) {
 46    window.timer = setInterval(function() {
 47     var diff = different(1, 20);
 48     console.log(foldUp.offsetTop)
 49     move(foldUp, diff, 1);
 50     move(foldDown, diff, 3);
 51     move(down, diff, 4);
 52    }, 40);
 53    setTimeout(function() {
 54     clearInterval(window.timer);
 55     foldUp.style.top = "0";
 56     foldDown.style.top = "0";
 57     down.style.top = "0";
 58     window.angel = 0;
 59    }, 1030);
 60    foldUp.style.webkitTransform = "rotateX(0deg)";
 61    foldDown.style.webkitTransform = "rotateX(0deg)";
 62   } else {
 63    console.log(window.angel)
 64   }
 65  }
 66  function positionValue(div, type) {// 得到css带单位的值
 67   var str = div.style[type];
 68   str = str.substring(0, str.length - 2);
 69   var value = parseInt(str);
 70   if (isNaN(value)) {
 71    value = 0;
 72   }
 73   return value;
 74  }
 75  function move(div, different, time) {
 76   var top = positionValue(div, "top");
 77   div.style.top = top + different * time + "px";
 78  }
 79  function different(direction, height) {
 80   var lastAngel = window.angel;
 81   window.angel += 3.6 * direction;
 82   var different = Math
 83     .ceil((Math.cos(window.angel / 180 * Math.PI) - Math
 84       .cos(lastAngel / 180 * Math.PI))
 85       * height * 100) / 100;
 86   return different;
 87  }
 88 </script>
 89  </head>
 90  <body>
 91   <div id="wrapper">
 92    <div id="up" class="paper">
 93     g
 94    </div>
 95    <div id="foldUp" class="paper">
 96     n
 97    </div>
 98    <div id="foldDown" class="paper">
 99     b
100    </div>
101    <div id="down" class="paper">
102     t
103    </div>
104   </div>
105   <button onclick=fold();>
106    fold
107   </button>
108  </body>
109 </html>

http://www.cnblogs.com/roucheng/

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/120775.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年12月，如有侵权请联系 cloudcommunity@tencent.com 删除

html