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: center;
          transition: 0.3s;
        }
        body .hamburger .bun.top {
          transform-origin: bottom right;
          border-top-right-radius: 400px;
          border-top-left-radius: 400px;
          padding-top: 25px;
        }
        body .hamburger .bun.top .seeds {
          position: absolute;
          transition: 0.3s;
        }
        body .hamburger .bun.top .seeds .seed {
          width: 12px;
          height: 18px;
          background-color: #ebebeb;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.3s;
        }
        body .hamburger .bun.top .seeds .seed a {
          opacity: 0;
          pointer-events: none;
          font-family: "Work Sans", sans-serif;
          position: absolute;
          text-align: center;
          white-space: nowrap;
          font-size: 16px;
          margin-top: -40px;
          transition: 0.3s;
        }
        body .hamburger .bun.top .seeds .seed.s1 {
          transform: translate(-130px, 45px) rotate(31deg);
        }
        body .hamburger .bun.top .seeds .seed.s1 a {
          transform: rotate(-31deg);
        }
        body .hamburger .bun.top .seeds .seed.s2 {
          transform: translate(-85px, 78px) rotate(17deg);
        }
        body .hamburger .bun.top .seeds .seed.s2 a {
          transform: rotate(-17deg);
        }
        body .hamburger .bun.top .seeds .seed.s3 {
          transform: translate(-53px, -44px) rotate(23deg);
        }
        body .hamburger .bun.top .seeds .seed.s3 a {
          transform: rotate(-23deg);
        }
        body .hamburger .bun.top .seeds .seed.s4 {
          transform: translateY(-25px);
        }
        body .hamburger .bun.top .seeds .seed.s5 {
          transform: translate(48px, 14px) rotate(-9deg);
        }
        body .hamburger .bun.top .seeds .seed.........完整代码请登录后点击上方下载按钮下载查看