html5菜单折纸效果

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“”，获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

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>