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