倾斜的弹性菜单

下载代码

html

css

分享到微信朋友圈

html

<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-.12-.123.977.977 0 0 0-.49-.257.867.867 0 0
                      0-.244-.033H38.11a.867.867 0 0 0-.243.033.977.977 0 0
                      0-.49.256.634.634 0 0 0-.12.12l-.013.012-4.11
                      5.134H28.11a1.114 1.114 0 0 0-1.11 1.11V73.89A1.114 1.114
                      0 0 0 28.11 75h44.446a1.114 1.114 0 0 0
                      1.11-1.11V31.666a1.114 1.114 0 0
                      0-1.11-1.11zm-7.078.988L54.91 41.156l-3.066-3.812
                      10.578-9.622zm-5.79-4.322l-9.355
                      8.5-9.355-8.5zm-21.444.5l10.578 9.622-3.066
                      3.812-10.567-9.612zm-9.022 5.056h4.022l11.9 10.822a1.094
                      1.094 0 0 0 1.612-.133l2.466-3.078v32.388h-20zm42.222
                      40h-20v-32.39l2.467 3.08a1.098 1.098 0 0 0
                      .78.42h.088a1.08 1.08 0 0 0 .744-.288l11.9-10.822h4.022z"
                      /></svg>
      <div class="category">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>Jeans</title><path
                        d="M65 29.95V26a1.003 1.003 0 0 0-1-1H42a1.003 1.003 0 0
                        0-1 1v12.67l-8.28 2.37a.99.99 0 0 0-.68 1.23l8.98
                        31.93.02.07a.878.878 0 0 0 .24.42.283.283 0 0 0
                        .1.09c.02.02.05.04.07.06a1.193 1.193 0 0 0
                        .16.08.603.603 0 0 0 .19.06 1.23 1.23 0 0 0
                        .2.02h22a1.002 1.002 0 0 0 .99-.86l3-21a1.218 1.218 0 0
                        0 0-.27zM43 27h20v2H43zm-8.76 15.69L41 40.75v2.08l-6.21
                        1.78zM41 44.91v21.84l-5.67-20.21zM63.13
                        73H43V31h20.12l2.87 21.99z" /><path d="M53.5 51a7.508
                          7.508 0 0 1-7.5-7.5V35a1 1 0 0 1 1-1h13a1 1 0 0 1 1
                          1v8.5a7.508 7.508 0 0 1-7.5 7.5zM48 36v7.5a5.5 5.5 0 0
                          0 11 0V36z" /></svg>
      <div class="category">Pants</div>
    </div>
  </div>
  <div class="bar-outer">
    <div class="bar bar-inner">
      <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="M57.982 26.02s.655 8.17-7.91
                              8.35c-8.565.183-8.53-8.087-8.53-8.087l-18.5 6.31
                              4.18 12.075 5.835-1.855.177 30.935
                              33.41.09V42.99l5.922 1.678
                              4.155-12.46-18.738-6.188zM51.96 41.666h8.33a1.04
                              1.04 0 0 1 1.044 1.043v5.206a5.214 5.214 0 0
                              1-5.21 5.21 5.214 5.214 0 0
                              1-5.208-5.21V42.71a1.04 1.04 0 0 1 1.043-1.044zM53
                              43.75v4.166a3.125 3.125 0 0 0 6.25 0V43.75H53z"
                              fill="#1d495f" fill-rule="evenodd" /><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" fill="#1d495f" /></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="M42.86 37.564l-9.862 4.522-10.53.668-1.558
                                  8.305 1.78 6.747 18.54.148 9.045 3.93
                                  26.102.297
                                  2.67-3.188-2.225-3.486-14.607-3.262-10.004-8.8zm4.777
                                  3.918c.4.265 1.085.835 1.802
                                  1.454l.02-.022c.448.367.83.642 1.267
                                  1.055l-.05.05c.933.835 1.788 1.625 1.788
                                  1.625L49.85 48.26c-.453.443-1.175.443-1.627
                                  0-.448-.45-.448-1.178
                                  0-1.63l2.927-3.135c-.43-.386-.84-.537-1.29-.926l-2.876
                                  2.823c-.452.443-1.176.443-1.63
                                  0-.446-.45-.446-1.18 0-1.63z" fill="#1d495f"
                                  fill-rule="evenodd" /><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.873-1.283-.61-2.81-.368-3.84.608-5.013
                                    4.713-12.628 4.082-15.667
                                    3.59-1.68-.28-3.31.724-3.818 2.35-1.338
                                    4.84-1.11 9.978.653 14.68v4.368c.002.633.514
                                    1.145 1.147 1.147h16.055c.633-.002
                                    1.145-.514 1.147-1.147v-3.325c1.823.288
                                    3.564.965 5.103 1.983 2.23 1.503 4.827 2.363
                                    7.512 2.49h22.936c6.04 0
                                    6.153-9.023.114-9.174zm-37.96
                                    6.88h-13.76v-2.293h13.76zm37.846
                                    0H52.477c-2.234-.128-4.392-.852-6.25-2.098-2.23-1.5-4.828-2.362-7.512-2.49H23.463c-1.398-4.08-1.538-8.486-.402-12.648.167-.532.703-.856
                                    1.25-.757 3.384.55 11.86 1.24
                                    17.605-4.174.346-.333.863-.415 1.296-.208
                                    1.56.733 3.044 1.62 4.427 2.65l1.824
                                    1.433c.448.367.884.745 1.32 1.158l1.685
                                    1.57c.85.827 1.72 1.7 2.638 2.616 7.098
                                    7.086 19.68 8.302 20.31 8.36 3.058 0 3.058
                                    4.586 0 4.586z" fill="#1d495f" /></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="M34
                                      31.55l-6.088.19.117 42.158
                                      44.937.15V31.76l-6.303-.037-12.176
                                      10.71-4.047-5.107 1.005
                                      3.06v32.39h-2.222v-32.39l1.218-3.06-4.667
                                      5.184zm21.89 16.784H67a1.11 1.11 0 0 1
                                      1.11 1.11v6.667a6.674 6.674 0 0 1-6.665
                                      6.667 6.674 6.674 0 0
                                      1-6.668-6.666v-6.665a1.11 1.11 0 0 1
                                      1.112-1.11zm1.11 2.22v5.557a4.444 4.444 0
                                      0 0 8.89 0v-5.555z" fill="#1d495f"
                                      fill-rule="evenodd" /><path d="M72.556
                                        30.556h-5.023l-4.11-5.134-.012-.01c-.034-.047-.075-.088-.12-.123-.136-.13-.306-.22-.49-.257-.08-.022-.162-.034-.244-.033H38.11c-.082
                                        0-.164.01-.243.033-.184.037-.354.126-.49.256-.045.034-.086.075-.12.12l-.013.012-4.11
                                        5.134H28.11c-.612 0-1.108.498-1.11
                                        1.11V73.89c.002.612.498 1.108 1.11
                                        1.11h44.446c.612-.002 1.11-.498
                                        1.11-1.11V31.666c0-.613-.498-1.11-1.11-1.11zm-7.078.988L54.91
                                        41.156l-3.066-3.812
                                        10.578-9.622zm-5.79-4.322l-9.355
                                        8.5-9.355-8.5zm-21.444.5l10.578
                                        9.622-3.066 3.812-10.567-9.612zm-9.022
                                        5.056h4.022l11.9 10.822c.472.438
                                        1.218.376 1.612-.133l3.54-4.747L50
                                        72.778H29.222zm42.222 40H50l.297-34.058
                                        3.614
                                        4.747c.19.243.472.396.78.422h.088c.276 0
                                        .542-.102.744-.29l11.9-10.822h4.022z"
                                        fill="#1d495f" /></svg>
        <div class="category">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>Jeans</title><path
                                          d="M42.156 29.95l.106 13.736-8.285
                                          2.308L42.03 73.87l21.94.228
                                          3.145-21.393-3.25-22.756h-21.71zM47
                                          34h13a1 1 0 0 1 1 1v8.5a7.508 7.508 0
                                          0 1-7.5 7.5 7.508 7.508 0 0
                                          1-7.5-7.5V35a1 1 0 0 1 1-1zm1
                                          2v7.5a5.5 5.5 0 0 0 11 0V36H48z"
                                          fill="#1d495f" fill-rule="evenodd" /><path
                                            d="M65 29.95V26a1.003 1.003 0 0
                                            0-1-1H42a1.003 1.003 0 0 0-1
                                            1v12.67l-8.28 2.37a.99.99 0 0 0-.68
                                            1.23l8.98 31.93.02.07a.878.878 0 0 0
                                            .24.42.283.283 0 0 0
                                            .1.09c.02.02.05.04.07.06a1.193 1.193
                                            0 0 0 .16.08.603.603 0 0 0 .19.06
                                            1.23 1.23 0 0 0 .2.02h22a1.002 1.002
                                            0 0 0 .99-.86l3-21a1.218 1.218 0 0 0
                                            0-.27zM43 27h20v2H43zm-8.76 15.69L41
                                            40.75v2.08l-6.21 1.78zM41
                                            44.91v21.84l-5.67-20.21zM63.13
                                            73H43V31h20.12l2.87 21.99z"
                                            fill="#1d495f" /></svg>
        <div class="category">Pants</div>
      </div>
    </div>
  </div>
</div>

css

body {
  align-items: center;
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  justify-content: center;
  height: 100vh;
background-color: #262626;
}
.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%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg