gsap+svg实现水中浮出菜单动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap+svg实现水中浮出菜单动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
<style>
#tabbar {
  --background: #fff;
  --shadow: rgba(0, 0, 0, 0.2);
  --menu-icon: #BBC1E1;
  --menu-icon-move: 0;
  --menu-icon-rotate: 0;
  --menu-icon-add: #275EFE;
  --menu-icon-add-opacity: 0;
  --menu-icon-add-background: rgba(39, 94, 254, 0.08);
  --options-icon: #404660;
  --options-y: 16;
  --options-middle-y: 16;
  --options-opacity: 0;
  margin-top: 10%;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
#tabbar.gooey {
  filter: url(#goo);
}
#tabbar:before {
  content: "";
  display: block;
  height: 760px;
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.05);
}
#tabbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: var(--list-spacing-h, 60px);
  right: var(--list-spacing-h, 60px);
  top: var(--list-spacing-top, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#tabbar ul li {
  transform: translate(calc(var(--x, 0) * var(--x-change, 1px)), calc(var(--y, 0) * var(--x-change, 1px))) translateZ(0);
}
#tabbar ul li button {
  display: block;
  padding: 0;
  margin: 0;
  outline: none;
  background: none;
  border: none;
  -webkit-appearance: none;
}
#tabbar ul.options {
  --svg-size: 16px;
  --svg-fill: var(--options-icon);
}
#tabbar ul.options li {
  --y: var(--options-y);
}
#tabbar ul.options li button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size, 52px);
  height: var(--size, 52px);
  border-radius: 50%;
  background: var(--background);
}
#tabbar ul.options li button svg {
  opacity: var(--options-opacity);
}
#tabbar ul.options li:nth-child(2) {
  --y: var(--options-middle-y);
  --size: 64px;
  --svg-size: 20px;
}
#tabbar ul.menu {
  --list-spacing-h: 74px;
  --list-spacing-top: 46px;
  --svg-size: 24px;
  --svg-fill: var(--menu-icon);
  z-index: 2;
}
#tabbar ul.menu li:first-child {
  --x: var(--menu-icon-move);
}
#tabbar ul.menu li.add {
  position: relative;
}
#tabbar ul.menu li.add button:before {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  opacity: var(--menu-icon-add-opacity);
  background: var(--menu-icon-add-background);
  transform: translateY(calc(var(--menu-icon-move) * 1px)) translateZ(0);
}
#tabbar ul.menu li.add button svg {
  stroke-width: 3.5;
  stroke: var(--menu-icon-add);
  stroke-linecap: round;
  transform: translateY(calc(var(--menu-icon-move) * 1px)) rotate(calc(var(--menu-icon-rotate) * 1deg)) translateZ(0);
}
#tabbar ul.menu li:last-child {
  --x: var(--menu-icon-move);
  --x-change: -1px;
}
#tabbar svg {
  display: block;
  position: relative;
  transform: translateZ(0);
  width: var(--svg-size, var(--svg-size-w, 374px));
  height: var(--svg-size, var(--svg-size-h, 132px));
  fill: var(--svg-fill, var(--background));
}
#tabbar svg.background {
  margin: -12px -4px -4px -4px;
  z-index: 1;
}

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

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

body {
  overflow: hidden;
  min-height: 100vh;
  font-family: "Inter";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  width: 76px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 112px;
  bottom: 14px;
}
body .twitter svg {
  width: 24px;
  height: 24px;
  fill: white;
}
</style>

</head>

<body>
  <div id="tabbar">
    <ul class="options">
        <li>
            <button>
                <svg viewBox="0 0 16 16">
                    <path d="M2,1.25 C1.46957,1.25 0.96086,1.45318464 0.58579,1.81486893 C0.21071,2.17654357 0,2.66708536 0,3.17857143 L0,12.8214286 C0,13.3328857 0.21071,13.8234179 0.58579,14.1851214 C0.96086,14.546825 1.46957,14.75 2,14.75 L14,14.75 C14.5304,14.75 15.0391,14.546825 15.4142,14.1851214 C15.7893,13.8234179 16,13.3328857 16,12.8214286 L16,3.17857143 C16,2.66708536 15.7893,2.17654357 15.4142,1.81486893 C15.0391,1.45318464 14.5304,1.25 14,1.25 L2,1.25 Z M14,12.8214286 L2,12.8214286 L6,5.10714286 L9,10.8928571 L11,7.03571429 L14,12.8214286 Z" />
                </svg>
            </button>
        </li>
        <li>
            <button>
                <svg viewBox="0 0 16 16" fill-rule="evenodd">
                    <path d="M2,3 C1.46957002,3 0.960860014,3.21071003 0.585790009,3.58579004 C0.210710003,3.96086004 0,4.46957005 0,5 L0,13 C0,13.5304002 0.210710003,14.0391002 0.585790009,14.4142002 C0.960860014,14.7893002 1.46957002,15 2,15 L14,15 C14.5304002,15 15.0391002,14.7893002 15.4142002,14.4142002 C15.7893002,14.0391002 16,13.5304002 16,13 L16,5 C16,4.46957005 15.7893002,3.96086004 15.4142002,3.58579004 C15.0391002,3.21071003 14.5304002,3 14,3 L12.4140002,3 C12.1488002,2.99994003 11.8945002,2.89455003 11.7070002,2.70700003 L10.5860002,1.58600001 C10.2110002,1.2109 9.70240014,1 9.17200014,1 L6.8280001,1 C6.29761009,1 5.78899009,1.2109 5.41400008,1.58600001 L4.29300006,2.70700003 C4.10551006,2.89455003 3.85119006,2.99994003 3.58600005,3 L2,3 Z M8.00000007,12.0000001 C8.39400013,12.0000001 8.78410013,11.9224002 9.14810014,11.7716002 C9.51200014,11.6209002 9.84270015,11.3999002 10.1213002,11.1213002 C10.3999002,10.8427001 10.6209002,10.5120001 10.7716002,10.1481001 C10.9224002,9.78410013 11.0000001,9.39400013 11.0000001,9.00000007 C11.0000001,8.60600011 10.9224002,8.21590011 10.7716002,7.8519501 C10.6209002,7.4879701 10.3999002,7.15726009 10.1213002,6.87868009 C9.84270015,6.60010008 9.51200014,6.37913008 9.14810014,6.22836008 C8.78410013,6.07760008 8.39400013,6.00000007 8.00000007,6.00000007 C7.20435011,6.00000007 6.4412901,6.31607008 5.87868009,6.87868009 C5.31607008,7.4412901 5.00000007,8.20440011 5.00000007,9.00000007 C5.00000007,9.79560013 5.31607008,10.5587001 5.87868009,11.1213002 C6.4412901,11.6839002 7.20435011,12.0000001 8.00000007,12.0000001 Z" />
                </svg>
            </button>
        </li>
        <li>
            <button>
                <svg viewBox="0 0 16 16">
                    <path d="M0,3.66666667 C0,3.09203417 0.21071,2.54093167 0.58579,2.13460583 C0.96086,1.72826917 1.46957,1.5 2,1.5 L7,1.5 L9,3.66666667 L14,3.66666667 C14.5304,3.66666667 15.0391,3.89493583 15.4142,4.3012725 C15.7893,4.70759833 16,5.25870083 16,5.83333333 L16,12.3333333 C16,12.9079333 15.7893,13.459025 15.4142,13.8653833 C15.0391,14.2717417 14.5304,14.5 14,14.5 L2,14.5 C1.46957,14.5 0.96086,14.2717417 0.58579,13.8653833 C0.21071,13.459025 0,12.9079333 0,12.3333333 L0,3.66666667 Z" />
                </svg>
            </button>
        </li>
    </ul>
    <svg class="background" viewBox="0 0 374 132">
        <path d="M4 20C4 15.5817 7.55339 12 11.9717 12C38.7242 12 126.989 12 187 12C247.011 12 335.276 12 362.028 12C366.447 12 370 15.5817 370 20V68C370 101.137 343.137 128 310 128H64C30.8629 128 4 101.137 4 68V20Z" />
    </svg>
    <ul class="menu">
        <li>
            <button>
                <svg viewBox="0 0 16 16">
                    <path d="M8.70806672,0.774494228 C8.52027842,0.598738796 8.26558741,0.5 7.99997964,0.5 C7.73442195,0.5 7.47972093,0.598738796 7.29190258,0.774494228 L0.281139469,7.33708036 C0.0986993821,7.51389518 -0.00224559136,7.75071079 1.02463177e-13,7.99652652 C0.00231140466,8.24234224 0.107643113,8.47747033 0.293338197,8.65128511 C0.479033281,8.82509989 0.730228923,8.92372619 0.992832079,8.92588246 C1.25543523,8.92803874 1.50842363,8.8335375 1.69731362,8.66272276 L1.99076413,8.38803166 L1.99076413,14.5624877 C1.99076413,14.811116 2.09628613,15.0496191 2.28410447,15.2254026 C2.47193283,15.4011862 2.72667392,15.5 2.99230172,15.5 L4.99537689,15.5 C5.2610046.........完整代码请登录后点击上方下载按钮下载查看