gsap+svg实现聚光灯式导航菜单切换效果代码-html代码-BFW代码库

gsap+svg实现聚光灯式导航菜单切换效果代码

代码语言：html

代码描述：gsap+svg实现聚光灯式导航菜单切换效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          filter: url("#goo");
          background-color: #03254c;
          background: linear-gradient(#03254c, black);
        }
        .menu-bar {
          position: relative;
          display: flex;
          background-color: #1167b1;
          background: linear-gradient(#02457a, #1167b1);
          box-shadow: 1px 1px 5px #21cdfc;
          max-width: max-content;
          margin: 45vh auto;
          border-radius: 20px;
          padding: 20px;
        }
        .menu-bar div {
          cursor: pointer;
          z-index: 1;
          padding-right: 40px;
        }
        .menu-bar div:last-of-type {
          padding-right: 0px;
        }
        .selected {
          position: absolute;
          width: 18px;
          height: 55px;
          border-radius: 50%;
          background-color: #d0efff;
          background: linear-gradient(#d0efff, #1167b1);
          z-index: 0;
          left: 14px;
          top: 17px;
        }
        
        .notification {
          animation: notification 1s;
          left: 100px;
          transition: left 1.5s;
        }
        .profile {
          animation: profile 1s;
          left: 182px;
          transition: left 1.5s;
        }
        .setting {
          animation: setting 1s;
          left: 268px;
          transition: left 1.5s;
        }
        .home {
          animation: home 1s;
          left: 15px;
          transition: left 1.5s;
        }
        @keyframes profile {
          50% {
            top: -60px;
          }
        }
        @keyframes setting {
          50% {
            top: -60px;
          }
        }
        @keyframes notification {
          50% {
            top: -60px;
          }
        }
        @keyframes home {
          50% {
            top: -60px;
          }
        }
    </style>



</head>

<body>
    <div class="menu-bar">
        <div class="selected" id="selected"></div>
        <div onclick=&qu.........完整代码请登录后点击上方下载按钮下载查看