弹跳菜单动画

下载代码

html

css

分享到微信朋友圈

html

css

.menu {
  --color: #fff;
  --duration: 1.6s;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  outline: none;
  position: relative;
  border: none;
  background: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
}
.menu:before, .menu:after {
  content: '';
}
.menu:before, .menu:after,
.menu div {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--color);
}
.menu div {
  margin: 6px 0;
}
.menu.animation {
  -webkit-animation: burger var(--duration) linear forwards var(--direction, reverse);
          animation: burger var(--duration) linear forwards var(--direction, reverse);
}
.menu.animation:before, .menu.animation:after,
.menu.animation div {
  --m: 2;
  --r: -1;
  -webkit-animation: move var(--duration) linear forwards var(--direction, reverse);
          animation: move var(--duration) linear forwards var(--direction, reverse);
}
.menu.animation div {
  --m: 1;
  --r: 1;
}
.menu.animation:after {
  --m: 0;
  --r: 1;
}
.menu.animation.active {
  --direction: normal;
}

@-webkit-keyframes burger {
  15% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30%,
    40% {
    -webkit-transform: none;
            transform: none;
  }
  60% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  75% {
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes burger {
  15% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  30%,
    40% {
    -webkit-transform: none;
            transform: none;
  }
  60% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  75% {
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@-webkit-keyframes move {
  15%,
    50% {
    -webkit-transform: translateY(calc(10px * var(--m)));
            transform: translateY(calc(10px * var(--m)));
  }
  30% {
    -webkit-transform: translateY(calc(-6px * var(--m)));
            transform: translateY(calc(-6px * var(--m)));
  }
  35% {
    -webkit-transform: translateY(calc(-8px * var(--m)));
            transform: translateY(calc(-8px * var(--m)));
  }
  65% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(60deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(60deg * var(--r)));
  }
  90% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(40deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(40deg * var(--r)));
  }
  80%,
    100% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(45deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(45deg * var(--r)));
  }
}
@keyframes move {
  15%,
    50% {
    -webkit-transform: translateY(calc(10px * var(--m)));
            transform: translateY(calc(10px * var(--m)));
  }
  30% {
    -webkit-transform: translateY(calc(-6px * var(--m)));
            transform: translateY(calc(-6px * var(--m)));
  }
  35% {
    -webkit-transform: translateY(calc(-8px * var(--m)));
            transform: translateY(calc(-8px * var(--m)));
  }
  65% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(60deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(60deg * var(--r)));
  }
  90% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(40deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(40deg * var(--r)));
  }
  80%,
    100% {
    -webkit-transform: translateY(calc(10px * var(--m))) rotate(calc(45deg * var(--r)));
            transform: translateY(calc(10px * var(--m))) rotate(calc(45deg * var(--r)));
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: #275EFE;
}

JavaScript

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