svg+anime实现导航条菜单点击动画效果代码-html代码-BFW代码库

svg+anime实现导航条菜单点击动画效果代码

代码语言：html

代码描述：svg+anime实现导航条菜单点击动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .container {
          display: inline-flex;
          background: #292632;
          border-radius: 100%;
          padding: 20px;
          justify-content: center;
          align-items: center;
        }
        
        .navbar{
          background: #292632;
          border-radius: 1em;
          padding: 10px 25px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          box-shadow: 4px 4px 0 #484259bd;
        }
        
        .content-wrapper{
          width: 100%;
          height: 100%;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        body{
          margin: 0;
          padding: 0;
          background: #f9cfff;
        }
    </style>



</head>

<body >
    <div class="content-wrapper">
        <div class="navbar">
            <div class="money container">
                <svg width="70" height="70" viewBox="0 0 187 187" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M120.383 73.123C120.573 68.1237 116.783 52.4302 94.7547 52.4302C59.9968 52.4303 61.3925 94.8227 94.7547 94.8227C128.117 94.8226 127.363 138.295 94.7547 138.295C68.6106 138.295 64.57 125.604 64.57 116.596" stroke="#DDB347" stroke-width="16" />
        <circle cx="93.5865" cy="93.4945" r="83.8334" stroke="#DD8F47" stroke-width="19" />
        <path d="M94.375 30.0293V49.583" stroke="#DDB347" stroke-width="21" />
        <path d="M94.375 139.947V159.5" stroke="#DDB347" stroke-width="21" />
      </svg>

            </div>
            <div class="bookmark container">
                <svg width="70" height="70" viewBox="0 0 155 185" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M63.154 152.233L9.85348 176.446C9.1914 176.747 8.43988 176.263 8.43988 175.536V43.4761C8.43988 39.6101 11.5739 36.4761 15.4399 36.4761H110.868C114.734 36.4761 117.868 39.6101 117.868 43.4761V175.529C117.868 176.258 117.113 176.742 116.451 176.438L63.7084 152.233" stroke="#73DC91" stroke-width="16" stroke-linecap="round" />
        <path d="M33.3929 8.39453H122.717C135.971 8.39453 146.717 19.1397 146.717 32.3945V157.394" stroke="#47CC6D" stroke-width="16" stroke-linecap="round" />
      </svg>

            </div>
            <div class="favorite container">
                <svg width="70" height="70" viewBox="0 0 171 155" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.4207 20.3395C-15.2615 57.1609 49.0133 118.839 85.2358 145.076C121.458 118.839 185.733 57.1609 153.051 20.3395C130.62 -4.93227 97.7638 15.1648 85.2358 32.5953C72.7077 15.1648 39.8516 -4.93227 17.4207 20.3395Z" stroke="#F15B76" stroke-width="16" stroke-linecap="round" />
      </svg>
            </div>
            <div class="cart container">
                <svg width="70" height="70" viewBox="0 0 135 170" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.55798 50.8779V154.076C8.55798 157.942 11.692 161.076 15.558 161.076H119.012C122.878 161.076 126.012 157.942 126.012 154.076V50.8779C126.012 47.0119 122.878 43.8779 119.012 43.8779H15.558C11.692 43.8779 8.55798 47.0119 8.55798 50.8779Z" stroke="#5397D6" stroke-width="16" stroke-linecap="round" />
        <.........完整代码请登录后点击上方下载按钮下载查看