html5菜单折纸效果_html5教程技巧

程序员文章站 2022-03-21 16:09:01

...

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

html5菜单折纸效果_html5教程技巧

点击后效果

html5菜单折纸效果_html5教程技巧

代码如下:

<!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 CSS3新的WEB标准和浏览器支持_html5教程技巧

html5指南-3.如何实现html元素拖拽功能_html5教程技巧

HTML5 b和i标记将被赋予真正的语义_html5教程技巧

关于HTML5你必须知道的28个新特性,新技巧以及新技术_html5教程技巧

html5适合移动应用开发的12大特性_html5教程技巧

字中字效果的实现【html5实例】_html5教程技巧

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧

关于HTML5的22个初级技巧(图文教程)

html5基础教程常用技巧整理

html5教程实现Photoshop渐变色效果