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

代码语言：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.s5 a {
          transform: rotate(9deg);
        }
        body .hamburger .bun.top .seeds .seed.s6 {
          transform: translate(100px, -72px) rotate(-28deg);
        }
        body .hamburger .bun.top .seeds .seed.s6 a {
          transform: rotate(28deg);
        }
        body .hamburger .bun.top .seeds .seed.s7 {
          transform: translate(144px, -15px) rotate(-15deg);
        }
        body .hamburger .bun.top .seeds .seed.s7 a {
          transform: rotate(15deg);
        }
        body .hamburger .bun.bot {
          transform-origin: top right;
          border-bottom-right-radius: 400px;
          border-bottom-left-radius: 400px;
        }
        body .hamburger .mid {
          z-index: 1;
          height: 22px;
          width: 370px;
          border-radius: 50px;
          transition: 0.3s;
        }
        body .hamburger .mid.salad {
          transform-origin: center right;
          background-color: #72ba60;
        }
        body .hamburger .mid.burger {
          background-color: #8e6b41;
          height: 35px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        body .hamburger .mid.tomato {
          transform-origin: center right;
          background-color: #d06767;
        }
        body .hamburger a {
          z-index: 2;
          cursor: pointer;
          user-select: none;
        }
        body .hamburger a.menu_link {
          z-index: 0;
          position: absolute;
          transform-origin: center center;
          font-family: "Work Sans", sans-serif;
          font-size: 18px;
          transition: 0.3s;
        }
        body .hamburger a.menu_link.menu_1 {
          transform: translate(170px, -40px) scale(0);
        }
        body .hamburger a.menu_link.menu_2 {
          transform: translate(170px, -18px) scale(0);
       .........完整代码请登录后点击上方下载按钮下载查看