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.21
              75H66.54a1.045 1.045 0 0 0 1.042-1.042V44.156l4.875 1.625a1.045
              1.045 0 0 0 1.32-.655l4.168-12.5a1.053 1.053 0 0
              0-.656-1.323zm-20.198-4.22a7.294 7.294 0 0 1-14.438 0zM72.136
              43.47l-5.26-1.75a1.037 1.037 0 0 0-.938.145 1.024 1.024 0 0
              0-.438.843v30.21H34.25v-30.21a1.024 1.024 0 0 0-.437-.843 1.037
              1.037 0 0 0-.938-.146l-5.26 1.75-3.51-10.522 16.51-5.5a9.365 9.365
              0 0 0 18.52 0l16.51 5.5z"
/><path d="M56.125 53.125a5.214 5.214 0
                0 1-5.208-5.208v-5.21a1.04 1.04 0 0 1 1.042-1.04h8.332a1.04 1.04
                0 0 1 1.042 1.04v5.21a5.214 5.214 0 0 1-5.21 5.208zM53
                43.75v4.167a3.125 3.125 0 0 0 6.25 0V43.75z"
/></svg>
<div class="category">T-shirts</div>
</div>
<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>Dress
                  Shoes
</title><path d="M75.527
                  54.326h-.01c-.127-.012-12.272-1.182-18.786-7.695-4.207-4.197-7.522-7.522-12.545-9.873a3.444
                  3.444 0 0 0-3.84.608c-5.013 4.713-12.628 4.082-15.667
                  3.59a3.416 3.416 0 0 0-3.818 2.35 23.767 23.767 0 0 0 .653
                  14.68v4.368A1.15 1.15 0 0 0 22.66 63.5h16.055a1.15 1.15 0 0 0
                  1.147-1.147v-3.325a12.9 12.9 0 0 1 5.103 1.983 14.687 14.687 0
                  0 0 7.512 2.49h22.936a4.588 4.588 0 0 0 .114-9.174zm-37.96
                  6.88h-13.76v-2.293h13.76zm37.846 0H52.477a12.51 12.51 0 0
                  1-6.25-2.098 14.686 14.686 0 0 0-7.512-2.49H23.463a21.535
                  21.535 0 0 1-.402-12.648 1.103 1.103 0 0 1 1.25-.757c3.384.55
                  11.86 1.24 17.605-4.174a1.152 1.152 0 0 1 1.296-.208 25.692
                  25.692 0 0 1 4.427 2.65l-2.282 2.282a1.156 1.156 0 0 0 0 1.628
                  1.163 1.163 0 0 0 1.63 0l2.476-2.477c.448.367.884.745 1.32
                  1.158L48.22 46.63a1.156 1.156 0 0 0 0 1.63 1.163 1.163 0 0 0
                  1.63 0l2.613-2.616c.85.826 1.72 1.698 2.638 2.615 7.098 7.086
                  19.68 8.302 20.31 8.36a2.294 2.294 0 0 1 0 4.586z"
/></svg>
<div class="category">Shoes</div>
</div>
<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>Buttoned
                    Shirt
</title><path d="M61.444 62.778a6.674 6.674 0 0
                    1-6.666-6.667v-6.666a1.11 1.11 0 0 1 1.11-1.11H67a1.11 1.11
                    0 0 1 1.11 1.11v6.667a6.674 6.674 0 0 1-6.666 6.668zM57
                    50.556v5.555a4.444 4.444 0 0 0 8.89 0v-5.554z"
/><path d="M72.556 30.556h-5.023l-4.11-5.134-.012-.01a.634.634 0 0
                     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0