feather-icons实现左侧悬浮滑动菜单导航效果代码-html代码-BFW代码库

代码语言：html
代码描述：feather-icons实现左侧悬浮滑动菜单导航效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
        body {
          background: #eaeef6;
          font-family: "Open Sans", sans-serif;
        }
        
        .navbar {
          position: fixed;
          top: 1rem;
          left: 1rem;
          background: #fff;
          border-radius: 10px;
          padding: 1rem 0;
          box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
          height: calc(100vh - 4rem);
        }
        .navbar__link {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 3.5rem;
          width: 5.5rem;
          color: #6a778e;
          transition: 250ms ease all;
        }
        .navbar__link span {
          position: absolute;
          left: 100%;
          transform: translate(-3rem);
          opacity: 0;
          color: #406ff3;
          background: #fff;
          padding: 0.75rem;
          transition: 250ms ease all;
          border-radius: 17.5px;
        }
        .navbar__link:hover {
          color: #fff;
        }
        .navbar__link:hover span {
          opacity: 1;
          transform: translate(0);
        }
        .navbar__menu {
          position: relative;
        }
        .navbar__item:last-child:before {
          content: "";
          position: absolute;
          opacity: 0;
          z-index: -1;
          top: 0;
          left: 1rem;
          width: 3.5rem;
          height: 3.5rem;
          background: #406ff3;
          border-radius: 17.5px;
          transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
        }
        .navbar__item:first-child:nth-last-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(1) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1):last-child:focus:before, .navbar__item:first-child:nth-last-child(1):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:focus-within:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(2):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2):nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2):nth-child(1):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:nth-child(1):focus-within ~ li:last-child:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2):last-child:focus:before, .navbar__item:first-child:nth-last-child(2):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:focus-within:before {
          top: 50%;
          animation: gooeyEffect-2 250ms 1;
        }
        @keyframes gooeyEffect-2 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(3):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3):nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3):nth-child(1):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(1):focus-within ~ li:last-child:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(3):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3):nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3):nth-child(2):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(2):focus-within ~ li:last-child:before {
          top: 33.3333333333%;
          animation: gooeyEffect-2 250ms 1;
        }
        @keyframes gooeyEffect-2 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3):last-child:focus:before, .navbar__item:first-child:nth-last-child(3):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:focus-within:before {
          top: 66.6666666667%;
          animation: gooeyEffect-3 250ms 1;
        }
        @keyframes gooeyEffect-3 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(4):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(1):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(1):focus-within ~ li:last-child:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(4):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(2):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(2):focus-within ~ li:last-child:before {
          top: 25%;
          animation: gooeyEffect-2 250ms 1;
        }
        @keyframes gooeyEffect-2 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(4):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4):nth-child(3):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(3):focus-within ~ li:last-child:before {
          top: 50%;
          animation: gooeyEffect-3 250ms 1;
        }
        @keyframes gooeyEffect-3 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4):last-child:focus:before, .navbar__item:first-child:nth-last-child(4):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:focus-within:before {
          top: 75%;
          animation: gooeyEffect-4 250ms 1;
        }
        @keyframes gooeyEffect-4 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(5):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(1):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(1):focus-within ~ li:last-child:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(5):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(2):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(2):focus-within ~ li:last-child:before {
          top: 20%;
          animation: gooeyEffect-2 250ms 1;
        }
        @keyframes gooeyEffect-2 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(5):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(3):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(3):focus-within ~ li:last-child:before {
          top: 40%;
          animation: gooeyEffect-3 250ms 1;
        }
        @keyframes gooeyEffect-3 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(5):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(4):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5):nth-child(4):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(4):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(4):focus-within ~ li:last-child:before {
          top: 60%;
          animation: gooeyEffect-4 250ms 1;
        }
        @keyframes gooeyEffect-4 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5):last-child:focus:before, .navbar__item:first-child:nth-last-child(5):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:focus-within:before {
          top: 80%;
          animation: gooeyEffect-5 250ms 1;
        }
        @keyframes gooeyEffect-5 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:hover ~ li:last-child:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before {
          opacity: 1;
        }
        .navbar__item:first-child:nth-last-child(6):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(1):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(1):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(1):focus-within ~ li:last-child:before {
          top: 0%;
          animation: gooeyEffect-1 250ms 1;
        }
        @keyframes gooeyEffect-1 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(2):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(2):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(2):focus-within ~ li:last-child:before {
          top: 16.6666666667%;
          animation: gooeyEffect-2 250ms 1;
        }
        @keyframes gooeyEffect-2 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(3):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(3):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(3):focus-within ~ li:last-child:before {
          top: 33.3333333333%;
          animation: gooeyEffect-3 250ms 1;
        }
        @keyframes gooeyEffect-3 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(4):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(4):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(4):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(4):focus-within ~ li:last-child:before {
          top: 50%;
          animation: gooeyEffect-4 250ms 1;
        }
        @keyframes gooeyEffect-4 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(5):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6):nth-child(5):focus-within ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(5):focus ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(5):focus-within ~ li:last-child:before {
          top: 66.6666666667%;
          animation: gooeyEffect-5 250ms 1;
        }
        @keyframes gooeyEffect-5 {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(0.5, 1.5);
          }
          100% {
            transform: scale(1, 1);
          }
        }
        .navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6):last-child:focus:before, .navbar__item:first-child:nth-last-child(6):last-child:focus-within:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:focus:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:focus-within:before {
          top: 8.........完整代码请登录后点击上方下载按钮下载查看