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: relative;
  width: 100%;
}
.category {
  transform: translateY(-130%);
  position: relative;
}
.option:nth-child(1) .garment {
  left: 5%;
}
.option:nth-child(1) .category {
  left: 5%;
}
.option:nth-child(4) .garment {
  left: -5%;
}
.option:nth-child(4) .category {
  left: -5%;
}

    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<div class="container">
<div class="bar bar-background">
<div class="option">
<svg class="garment" xmlns="http://www.w3.org/2000/svg" data-name="Ebene 1" viewBox="0
            0 100 100" width="100" height="100"><title>T-Shirt</title><path d="M77.292 31.302l-18.438-6.146a3.108 3.108 0 0
              0-.98-.156h-16a3.108 3.108 0 0 0-.978.156L22.46 31.302a1.053 1.053
              0 0 0-.658 1.323l4.167 12.5a1.045 1.045 0 0 0
              1.322.656l4.875-1.624v29.802A1.045 1.045 0 0 0 33.2.........完整代码请登录后点击上方下载按钮下载查看