svg+js+css实现菜单栏选中动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+js+css实现菜单栏选中动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap');
    
    :root{
      --blueslate: #70d6ff;
      --bgBlue: #9ee3ff;
      --neonpink: #ff70a6;
      --bgNeonPink: #ffadcc;
      --seashellpink: #ff9770;
      --bgSeashell:#ffb396;
      --ochre: #ffd670;
      --bgOchre: #ffe5a3;
      --canary: #e9ff70;
      --bgCanary:#f0ff9c;
    }
    html,body{
      height:100%;
      overflow:hidden;
      position:relative;
      z-index:-100;
    }
    body{
      background:#d4f2ff;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }
    
    .text{
      font-family: 'Montserrat', sans-serif;
      font-size: 1.5rem;
    }
    
    .tab_bar_container{
      display:flex;
      justify-content:space-evenly;
      align-items:center;
      background: #fff;
      width:fit-content;
      border-radius: 40px;
      padding:0.65em 3.5em 0.8em 3.5em;
      position:relative;
      z-index:-3;
    }
    .tab_item{
      width:100px;
      height:100px;
      margin:0 0.5em;
      padding:0;
      display:flex;
      justify-content:center;
      align-items:center; 
      border-radius:50%;
      
      position:relative;
      z-index:1;
      
      
    }
    
    .hidden{
      display:none;
    }
    
    .svg{
      width:75px;
      display:block;
      margin: 0 auto;
      padding:0;
      stroke: black;
    }
    
    .transition_svg{
      width:200px;
      height:100px;
      position:absolute;
      z-index:-2;
    }
    
    .svg:hover{
      cursor:pointer;
    }
    .svg:active{
      transform:scale(0.9);
      transition: all 1s ease;
    }
    .drawn_path {
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: draw 1s linear;
    }
    .drawn_icon{
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: draw 5s ease;
    }
    .active{
      transition: all 0.3s ease;
    }
    .activeBg{
      width:200px;
      border-radius:50px;
    }
    .attribution{
      justify-self:flex-end;
      margin-top:8em;
    }
    a{
      text-decoration:none;
      font-weight:bold;
      color:white;
      font-family:'Montserrat', sans-serif;
    }
    @keyframes grow{
      from{
        transform:scale(0.2);
      }
      to{
        transform:scale(1);
      }
    }
    @keyframes draw{
      from {
        stroke-dashoffset: 650;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    
    
    @media (max-width: 750px){
      .tab_item{
        width:50px;
        height:50px;
      }
      .text{
        font-size:1rem;
        margin-right:0.5rem;
      }
      .svg{
        width:55px;
      }
      .transition_svg{
        width:100px;
      }
      .activeBg{
        width:100px;
      }
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="tab_bar_container">

        <div class="tab_item" id="home_container">
            <svg class="transition_svg" viewBox="49 25 202 100">
      <path class="circle_path" stroke-width="2" fill="none" d="m 100 125 a 1 1 0 0 1 0 -100 l 100 0 a 1 1 0 0 1 0 100 l -100 0 z "/>
    </svg>

            <svg class="svg active" id="home" viewBox="27 13 47 44">
      <path class="path" id="home_icon_path" stroke-width="2" fill="none" d="m 30 35 l 20 -20 a 2 2 0 0 1 2 0 l 20 20 l -5 0 l 0 20 l -12 0 l 0 -10 a 1 1 0 0 0 -8 0 l 0 10 l -12 0 l 0 -20 l -5 0 z "/>
    </svg>
            <p class="text hidden">Home</p>
        </div>

        <div class="tab_item" id="heart_container">
            <svg class="transition_svg" viewBox="49 25 202 100">
      <path class="circle_path" stroke-width="2" fill="none" d="m 100 125 a 1 1 0 0 1 0 -100 l 100 0 a 1 1 0 0 1 0 100 l -100 0 z "/>
    </svg>
            <svg class="svg" id="heart" viewBox="27 14 48 44">
      <path class="path" id="heart_icon_path" stroke-width="2" fill="none" d="m 30 30 a 1 1 0 0 1 21 -3 a 1 1 0 0 1 21 3 a 6 6 0 0 1 -1 3 l -20 22 l -20 -22 a 6 6 0 0 1 -1 -3 z "/>
    </svg>

            <p class="text hidden">Likes</p>
        </div>

        <div class="tab_item" id="search_container">
            <svg class="transition_svg" viewBox="49 25 202 100">
      <path class="circle_path" stroke-width="2" fill="none" d="m 100 125 a 1 1 0 0 1 0 -100 l 100 0 a 1 1 0 0 1 0 100 l -100 0 z "/>
    </svg>
            <svg class="svg" id="search" viewBox="27 14 47 44&quo.........完整代码请登录后点击上方下载按钮下载查看