gsap+svg实现动态水滴填充tabbar导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+svg实现动态水滴填充tabbar导航条效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
#tabbar {
  --c-color: #763FEE;
  --c-background: #FFFFFF;
  --indicator-x: 34px;
  --indicator-circle-o: 1;
  --indicator-circle-y: 0px;
  -webkit-tap-highlight-color: transparent;
  border-radius: 31px;
  overflow: hidden;
  position: relative;
  background: var(--c-background);
}
#tabbar .indicator {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  display: block;
  width: 68px;
  height: 72px;
  fill: var(--c-color);
  transform: translateX(var(--indicator-x));
}
#tabbar .indicator path {
  transform: translateY(2px);
}
#tabbar .indicator circle {
  opacity: var(--indicator-circle-o);
  transform: translateY(var(--indicator-circle-y)) translateZ(0);
}
#tabbar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 375px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
#tabbar ul li {
  --icon-y: 0px;
  --icon-s: 1;
  --icon-circle: 0px;
}
#tabbar ul li:not(:first-child) {
  margin-left: 26px;
}
#tabbar ul li:not(:last-child) {
  margin-right: 26px;
}
#tabbar ul li.active {
  --icon-circle: 28px;
}
#tabbar ul li button {
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
  position: relative;
  -webkit-appearance: none;
  transform: translateY(var(--icon-y)) scale(var(--icon-s)) translateZ(0);
}
#tabbar ul li button:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: var(--c-background);
  -webkit-clip-path: circle(var(--icon-circle) at 50% 100%);
          clip-path: circle(var(--icon-circle) at 50% 100%);
}
#tabbar ul li button svg {
  color: var(--c-color);
  display: block;
  overflow: visible;
  width: 28px;
  height: 28px;
}
#tabbar ul li button svg:last-child {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  -webkit-clip-path: circle(var(--icon-circle) at 50% 100%);
          clip-path: circle(var(--icon-circle) at 50% 100%);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Poppins", Arial;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F4EEFD;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>



</head>

<body>
  <div id="tabbar">
    <ul>
        <li class="active">
            <button>
                <svg>
                    <use xlink:href="#icon-home" />
                </svg>
                <svg>
                    <use xlink:href="#icon-home-filled" />
                </svg>
            </button>
        </li>
        <li>
            <button>
                <svg>
                    <use xlink:href="#icon-chat" />
                </svg>
                <svg>
                    <use xlink:href="#icon-chat-filled" />
                </svg>
            </button>
        </li>
        <li>
            <button>
                <svg>
                    <use xlink:href="#icon-folder" />
                </svg>
                <svg>
                    <use xlink:href="#icon-folder-filled" />
                </svg>
            </button>
        </li>
        <li>
            <button>
                <svg>
                    <use xlink:href="#icon-user" />
                </svg>
                <svg>
                    <use xlink:href="#icon-user-filled" />
                </svg>
            </button>
        </li>
    </ul>
    <svg class="indicator" viewBox="0 0 68 72">
        <defs>
            <filter id="goo" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">
                <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" result="cm" />
            </filter>
        </defs>
        <g filter="url(#goo)">
            <path d="M34 54C45.4078 54 48.3887 66.7534 68 72H0C19.6113 66.7534 22.5922 54 34 54Z" />
            <circle cx="34" cy="66" r="4" />
        </g>
    </svg>
</div>

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <symbol id="icon-home" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M11.5358 2.91088C11.8081 2.69637 12.1919 2.69637 12.4642 2.91088L19.5708 8.51003C20.4733 9.2211 21 10.3067 21 11.4556V20.75C21 21.4404 20.4404 22 19.75 22H14.75C14.0596 22 13.5 21.4404 13.5 20.75V15.75C13.5 15.6119 13.3881 15.5 13.25 15.5H10.75C10.6119 15.5 10.5 15.6119 10.5 15.75V20.75C10.5 21.4404 9.94036 22 9.25 22H4.25C3.55964 22 3 21.4404 3 20.75V11.4556C3 10.3067 3.52672 9.2211 4.42923 8.51003L11.5358 2.91088ZM12 4.45482L5.35754 9.68827C4.81603 10.1149 4.5 10.7662 4.5 11.4556V20.5H9V15.75C9 14.7835 9.7835 14 10.75 14H13.25C14.2165 14 15 14.7835 15 15.75V20.5H19.5V11.4556C19.5 10.7662 19.184 10.1149 18.6425 9.68827L12 4.45482Z" />
    </symbol>
    <symbol id="icon-home-filled" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M20.9992 11.8484L21 20.7181C21 21.1638 20.9536 21.3255 20.8664 21.4884C20.7793 21.6514 20.6514 21.7793 20.4884 21.8664C20.3255 21.9536 20.1638 22 19.7181 22H15.2819C14.8362 22 14.6745 21.9536 14.5116 21.8664C14.3486 21.7793 14.2207 21.6514 14.1336 21.4884C14.0464 21.3255 14 21.1638 14 20.7181V16.2819C14 15.8362 13.9536 15.6745 13.8664 15.5116C13.7793 15.3486 13.6514 15.2207 13.4884 15.1336C13.3255 15.0464 13.1638 15 12.7181 15H11.2819C10.8362 15 10.6745 15.0464 10.5116 15.1336C10.3486 15.2207 10.2207 15.3486 10.1336 15.5116C10.0464 15.6745 10 15.8362 10 16.2819V20.7181C10 21.1638 9.95359 21.3255 9.86643 21.4884C9.77928 21.6514 9.65139 21.7793 9.48842 21.8664C9.32546 21.9536 9.16382 22 8.71806 22H4.28194C3.83618 22 3.67454 21.9536 3.51158 21.8664C3.34861 21.7793 3.22072 21.6514 3.13357 21.4884C3.04641 21.3255 3 21.1638 3 20.7181V12.0465C3 11.2101 3.03626 10.9164 3.12103 10.5932C3.20581 10.2699 3.3391 9.98532 3.53316 9.71325L3.63288 9.58016C3.80691 9.36035 4.0367 9.13609 4.5722 8.68983L11.1575 3.20211C11.465 2.94583 11.5992 2.87958 11.7594 2.836C11.9195 2.79241 12.0805 2.79241 12.2406 2.836C12.4008 2.87958 12.535 2.94583 12.8425 3.20211L19.4278 8.68983C20.0704 9.22534 20.2728 9.44118 20.4668 9.71325C20.6609 9.98532 20.7942 10.2699 20.879 10.5932C20.9567 10.8895 20.9936 11.1609 20.9992 11.8484Z" />
    </symbol>
    <symbol id="icon-chat" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.3817 22 8.81782 21.6146 7.41286 20.888L3.58704 21.9553C2.92212 22.141 2.23258 21.7525 2.04691 21.0876C1.98546 20.8676 1.98549 20.6349 2.04695 20.4151L3.11461 16.5922C2.38637 15.186 2 13.6.........完整代码请登录后点击上方下载按钮下载查看