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

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

代码语言：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{
      c.........完整代码请登录后点击上方下载按钮下载查看