svg+css+js实现图标点击伸缩背景更换菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css+js实现图标点击伸缩背景更换菜单效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html {
      height: 100%;
      font-size: 1.3vw;
    }
    
    @media (min-width: 768px) {
      html {
        font-size: 62.5%;
      }
    }
    
    body {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e4a924;
      transition: background-color 0.55s;
      will-change: background-color;
      margin: 0;
    }
    
    .menu__item {
      width: 8.5rem;
      height: 8.5rem;
      border-radius: 12.5rem;
      background: #f3f3f3;
      display: inline-block;
      margin-left: 1.1rem;
      animation-name: close;
      animation-duration: 0s;
      will-change: width background-color;
      transition: background 0.55s;
      vertical-align: top;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px rgba(0,0,0, 0.1);
    }
    
    .menu__item:first-child {
      margin-left: 0;
    }
    
    .menu__item--animate {
      animation-duration: 0.5s;
    }
    
    .menu__item--active {
      width: 17rem;
      animation-name: open;
    }
    
    @keyframes open {
      0% {width: 8.5rem;}
      40% {width: 18.5rem;}
      80% {width: 17rem;}
      100% {width: 17rem;}
    }
    
    @keyframes close {
      0% {width: 17rem;}
      40% {width: 7rem;}
      80% {width: 8.5rem;}
      100% {width: 8.5rem;}
    }
    
    .menu__item--active.menu__item--yellow { background: #fabe2b; }
    .menu__item--active.menu__item--red { background: #f43768; }
    .menu__item--active.menu__item--green { background: #45e1a3; }
    .menu__item--active.menu__item--purple { background: #c152da; }
    
    .menu__item svg {
      fill: #a6a6a6;
      width: 4.5rem;
      height: 4.5rem;
      transtiion: fill 0.55s;
      will-change: fill;
    }
    
    .menu__item--active svg {
      fill: #fffdfe;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <nav class="menu">
        <a href="#" class="menu__item menu__item--yellow menu__item--active" data-background="e4a924">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded_1_"> <g id="ui_x5F_spec_x5F_header_copy_6"> </g> <path d="M20,2H4C2.9,2,2.01,2.9,2.01,4L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M7,9h10c0.55,0,1,0.45,1,1v0 c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v0C6,9.45,6.45,9,7,9z M13,14H7c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6 c0.55,0,1,0.45,1,1v0C14,13.55,13.55,14,13,14z M17,8H7C6.45,8,6,7.55,6,7v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0 C18,7.55,17.55,8,17,8z"/> </g> </svg>
        </a>
        <a href="#" class="menu__item menu__item--red" data-background="c92142">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v1c0,0.55,0.45,1,1,1h14 c0.55,0,1-0.45,1-1v-1C20,15.34,14.67,14,12,14z"/> </g> </svg>
        </a>
        <a href="#" class="menu__item menu__item--green" data-background="37b983">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S14.21,8,12,8z M20.94,11C20.48,6.83,17.17,3.52,13,3.06V2 c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v1.06C6.83,3.52,3.52,6.83,3.06,11H2c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h1.06 c0.46,4.17,3.77,7.48,7.94,7.94V22c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1v-1.06c4.17-0.46,7.48-3.77,7.94-7.94H22 c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H20.94z M12,19c-3.87,0-7-3.13-7-7s3.13-7,7-7s7,3.13,7,7S15.87,19,12,19z"/> </g> </svg>
        </a>
        <a href="#" class="menu__item menu__item--purple" data-background="9f32b8">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Header_x2F_BG" display="none"> <rect x="-402" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/> </g> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_3" display="none"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <g id="ui_x5F_spec_x5F_header_copy_5" display="none"> </g> <path d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98s-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46 c-0.12-0.22-0.39-0.3-0.61-0.22l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65C14.46,2.18,14.25,2,14,2h-4 C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1c-0.23-0.09-0.49,0-0.61,0.22l-2,3.46 C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98l-2.11,1.65 c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46c0.12,0.22,0.39,0.3,0.61,0.22l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.23,0.09,0.49,0,0.61-0.22l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5 s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"/> </g> <g id="Sharp" display="none"> <g id="ui_x5F_spec_x5F_header_copy_4"> <.........完整代码请登录后点击上方下载按钮下载查看