svg歪曲弹性动画菜单效果-html代码-BFW代码库

svg歪曲弹性动画菜单效果

代码语言：html

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

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

<title>Skewed stretchy menu</title>
<style>
      body {
  align-items: center;
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  justify-content: center;
  height: 100vh;
}
.container {
  align-items: center;
  background: #eeedef;
  clip-path: polygon(4% 0px, 100% 0%, 96% 100%, 0px 100%);
  display: flex;
  height: 100px;
  justify-content: center;
  position: relative;
  width: 400px;
}
.bar {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}
.bar-inner {
  background: #9ad2f6;
  color: black;
  clip-path: polygon(100% 0, 100% 100%, 0% 100%, 4% 0);
  transition: clip-path 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.option {
  cursor: pointer;
  text-align: center;
  width: 25%;
}
.bar-outer {
  clip-path: polygon(0 0, 0 100%, 24% 100%, 28% 0);
  height: 100%;
  pointer-events: none;
  transition: clip-path 250ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.bar-outer.pos2 .bar-inner {
  clip-path: polygon(100% 0, 100% 100%, 24% 100%, 28% 0);
}
.bar-outer.pos2 {
  clip-path: polygon(0 0, 0 100%, 48% 100%, 52% 0);
}
.bar-outer.pos3 .bar-inner {
  clip-path: polygon(100% 0, 100% 100%, 48% 100%, 52% 0);
}
.bar-outer.pos3 {
  clip-path: polygon(0 0, 0 100%, 72% 100%, 76% 0);
}
.bar-outer.pos4 .bar-inner {
  clip-path: polygon(100% 0, 100% 100%, 72% 100%, 76% 0);
}
.bar-outer.pos4 {
  clip-path: polygon(0 0, 0 100%, 96% 100%, 100% 0);
}
.bar-outer.left .bar-inner {
  transition-delay: 0;
}
.bar-outer.left {
  transition-delay: 80ms;
}
.bar-outer.right .bar-inner {
  transition-delay: 80ms;
}
.bar-outer.right {
  transition-delay: 0;
}
.garment {
  position: rel.........完整代码请登录后点击上方下载按钮下载查看