gsap实现跳跃式动画导航效果-html代码-BFW代码库

代码语言：html

代码描述：gsap实现跳跃式动画导航效果，配合插件MotionPathPlugin

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  font-family: "proxima-nova", sans-serif;
  color: white;
  display: flex;
  height: 100vh;
  background: #111;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(
    0deg,
    #382B8C,
    #746BB0
  );  
}
#demo {
  width: 90vw;
  height: auto;
  max-width: 720px;
  overflow: visible;
}
#icons path {
  
  fill: white;
}

text {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  fill: rgba(0,0,0,0.5);
}

#icons g {
 cursor: pointer;
 
}

#icons rect {
  fill: transparent;
}

.goop {
  fill: #1C4861;
  fill: #5C51A6;
  fill: #382B8C;
}

#main {
  stroke: #00688e;
  stroke: none;
  stroke-width: 1px;
}



h1, h2,
p {
  margin: 0;

}

a {
  background: #5cceee;
  color: white;
  padding: 10px;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 10px;
}

a:hover {
  background: white;
    color: #5cceee;
}
h1, h2,
p {
  margin: 0;
}
h2 {
  font-weight: 400;
}
h2 span {
  font-weight: 700;
  color: #5cceee;
}
p span {
  font-weight: 700;
  color: #5cceee;
}

.branding {

  display: flex;
  flex-direction: column;
 align-items: center;
/*   position: absolute;
  bottom: 1rem; */
}
</style>

</head>
<body translate="no">
<h1>Jumping Gooey Nav</h1>
<p>smooth & gooey goodness</p>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
<defs>
<filter id="gooFilter">
<fegaussianblur in="SourceGraphic" stdDeviation="10" 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 20 -8" result="goo" />
<feblend in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
<g filter="url(#gooFilter)">
<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
</g>
<g id="icons">
<g>
<rect x="15" y="77" width="70" height="70" />
<path d="M34.74,109.29V130h4.91V112.92h6.86V130H65.24V109.29L50,97.32Zm16.74,3.63H61v8.68H51.48Zm-22.54-6.34L50,90l9.09,7.14V90.78h4.54v9.92l7.44,5.85-1.77,2.79L50,94.22,30.7,109.34Z" />
</g>
<g>
<rect x="115" y="77" width="70" height="70" />
<path d="M161.13,117.8a8.38,8.38,0,0,0,2.11-.84c-6.74-4.92-1.11-8.9-1-16.11.06-4.43-4.53-9.86-7.39-8.32-1-5.29-19.27-2.11-18.17,7.87A11.11,11.11,0,0,1,139.3,98c-5.68,8.17,5.26,15.21-2.93,19a5.87,5.87,0,0,0,2.36.84c-3.34,1.6-6,3.72-6,5.62V130h34.48v-6.5C167.24,121.57,164.54,119.42,161.13,117.8Zm-19.39-12.87.45-.13v-.46a2.35,2.35,0,0,0-.06-.65c3-1.76,13.66-.14,14.74-4.55a1.1,1.1,0,0,1,.65.49,11.9,11.9,0,0,1,.38,4.71l-.05.46.45.13c.24.07,1,.28.84,1.65a3.53,3.53,0,0,1-1.77,2.79l-.36.07-.09.35c-.8,3.25-3.89,5.89-6.88,5.89s-6.08-2.64-6.88-5.89l-.09-.35-.36-.07a3.53,3.53,0,0,1-1.77-2.79C140.79,105.21,141.5,105,141.74,104.93Zm2.58,9.28a8.15,8.15,0,0,0,5.68,2.6,7.85,7.85,0,0,0,5-2,2,2,0,0,0,.42,2,10.24,10.24,0,0,1-5.43,1.62,10.53,10.53,0,0,1-6-2A2.76,2.76,0,0,0,144.32,114.21Zm-2.55,3.64a4.51,4.51,0,0,0,1-.39l.44-.14a11.24,11.24,0,0,0,13.27.14h.05a13.13,13.13,0,0,0,1.65.37,13.31,13.31,0,0,1-16.46,0Zm18.06,9.52h-6.55V126h6.55ZM150,112.43a4.42,4.42,0,0,1-2.47-.69l.48-.64a4.11,4.11,0,0,0,4.1,0l.44.66A4.84,4.84,0,0,1,150,112.43Z" />
</g>
<g>
<rect x="215" y="77" width="70" height="70" />
<path d="M263.58,103.84c-.36.81-.73,1.68-1.06,2.51l2.81,1.14v18.42l-13.91-5.62V101.87l4.63,1.87a22.48,22.48,0,0,0-1.58-3.09h0L254,100l-4-1.61-18.18,7.34V130L250,122.66,268.18,130V105.7Zm-15,16.45-13.91,5.62V107.49l13.91-5.62Zm17.11-24.72a5.86,5.86,0,0,0-11.7,0,6.71,6.71,0,0,0,1.1,3.36,91.68,91.68,0,0,1,4.75,10.38,92.42,92.42,0,0,1,4.74-10.38,6.62,6.62,0,0,0,1.11-3.36Zm-5.85,3a11.79,11.79,0,1,1,.06,0h-.06ZM237.72,113.4c.65.54.65.71,0,1.25s-.76.6-1.32,0-.63-.71,0-1.26S237.15,112.79,237.72,113.4Zm2.17-2c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.71,0-1.25S240.45,110.84,239.89,111.45Zm3.73,1.13c-.63.55-.63.72,0,1.26s.74.59,1.31,0,.64-.7,0-1.25S244.18,112,243.62,112.58Zm2.06,3.55c-.63.55-.63.72,0,1.26s.74.59,1.32,0,.63-.7,0-1.24S246.24,115.52,245.68,116.13Zm7.48.53c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.7,0-1.24-.76-.63-1.32,0Zm3.86-1.1c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.64-.7,0-1.25-.76-.56-1.34,0Zm1.92-3.56c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.63-.71,0-1.25-.76-.62-1.32,0Z" />
</g>
<g>
<rect x="315" y="77" width="70" height="70" />
<path d="M372.7,110c0-3-5.34-5-12.33-6,.34-.84.64-1.65.92-2.44a4.63,4.63,0,0,1-1.67-.47c-.3.87-.64,1.76-1,2.68-1.56-.17-3.17-.29-4.8-.37-.87-1.35-1.79-2.68-2.73-4,3.81-4.94,7.2-7.72,9-7.72a.83.83,0,0,1,.46.11,1.43,1.43,0,0,1,.55.94,4.41,4.41,0,0,1,1.77.12,3.32,3.32,0,0,0-1.45-2.56A2.61,2.61,0,0,0,360,90c-2.69,0-6.45,3.46-10,8-3.57-4.58-7.33-8-10-8a2.56,2.56,0,0,0-1.33.34c-1.74,1-2,4-.76,8.57a43.77,43.77,0,0,0,1.74,5.1c-1,.13-1.94.29-2.85.47a4.45,4.45,0,0,1,.58,1.66c.94-.18,1.93-.34,3-.48q.93,2.13,2.07,4.34c-.76,1.47-1.46,2.93-2.07,4.35-7.16-1-11.29-2.87-11.29-4.35a1.2,1.2,0,0,1,.33-.73,4.39,4.39,0,0,1-.73-1.69A3.19,3.19,0,0,0,327.3,110c0,3,5.34,5,12.33,6a43.77,43.77,0,0,0-1.74,5.1c-1.25,4.6-1,7.56.76,8.57A2.55,2.55,0,0,0,340,130c2.69,0,6.45-3.46,10-8,.4.........完整代码请登录后点击上方下载按钮下载查看