jquery+svg实现汉堡菜单效果代码-html代码-BFW代码库

jquery+svg实现汉堡菜单效果代码

代码语言：html

代码描述：jquery+svg实现汉堡菜单效果代码，点击menu可动画分解汉堡弹出菜单。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Bungee&amp;family=Work+Sans:wght@600&amp;display=swap'>

    <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          font-family: "Bungee", sans-serif;
          color: #f1f1f1;
          text-decoration: none;
        }
        
        body {
          background-color: #616ee7;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
        }
        body h1 {
          font-size: 48px;
          line-height: 1;
          text-align: center;
        }
        body h1 span {
          font-size: 121px;
          line-height: 0.8;
        }
        body .hamburger {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          height: 600px;
          width: 400px;
          overflow: hidden;
          /*
          transform: scale(0.2);
          transform-origin: top right;
          transition: 0.3s;
          position: fixed;
          top: 20px;
          right: 20px;
          cursor: pointer;
        
          &.active {
                transform: scale(1);
                height: 600px;
                width: 400px;
                cursor: default;
        
                a {
                        display: initial;
                }
          }
          */
        }
        body .hamburger .bun {
          z-index: 1;
          height: 150px;
          width: 350px;
          background-color: #c1a541;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: cen.........完整代码请登录后点击上方下载按钮下载查看