移动端菜单按钮打开关闭css3小图标动画

代码2020-12-221,207 人已阅来源:网络

移动端菜单按钮打开关闭css3小图标动画,保存以便备用

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端菜单按钮打开关闭css3小图标动画</title>
</head>
<style>
  body,html{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu{
    width: 40px;
    height: 40px;
    position: relative;
    color: black;
    border: 1px solid;
  }
  .menu::after,.menu::before{
    content: "";
    display: block;
    position: absolute;
    left: 20%;
    right: 20%;
    top:50%;
    height: 3px;
    border-radius: 100px;
    background: currentColor;
    transform: translateY(-50%);
    transition: all ease .3s;
  }
  .menu::after{
    box-shadow: 0 -8px currentColor,0 8px currentColor;
  }
  .menu.close::after{
    box-shadow:none;
  }
  .menu.close::after{
    transform: translateY(-50%) rotate(45deg);
  }
  .menu.close::before{
    transform: translateY(-50%) rotate(-45deg);
  }
</style>
<body>
  <div class="menu close"></div>
  <script>
    //aihongxin.com
    let menu = document.getElementsByClassName("menu")[0];
    let a = true;
    menu.onclick = function(){
      if(a){
          this.className = "menu"
          a = false
      }
      else{
          this.className = "menu close"
          a = true
      }
    }
  </script>
</body>
</html>