汉堡菜单动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;background-color: #3cf4ff; 
}
svg {
  height: 80px;
  position: absolute;
  width: 80px;
}
.plates {
  display: flex;
  flex-wrap: wrap;
  max-height: 160px;
  width: 640px;
}
@media (max-width: 640px) {
  .plates {
    width: 320px;
  }
}
.plate {
  height: 80px;
  width: 80px;
}
.burger {
  filter: url(#gooeyness);
}
.x {
  transform: scale(0);
  transition: transform 400ms;
}
.line {
  fill: none;
  stroke: black;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}
.x .line {
  stroke-width: 5.5px;
}
/* First plate */
.plate1 .line2 {
  stroke-dasharray: 40 200;
  stroke-dashoffset: 0px;
}
.plate1 .line3 {
  stroke-dasharray: 40 179;
  stroke-dashoffset: 0px;
}
.active .line {
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.active.plate1 .line1 {
  transform: scale(0, 1);
  transition: transform 500ms 100ms;
}
.active.plate1 .line2 {
  stroke-dasharray: 5px 200;
  stroke-dashoffset: -164px;
}
.active.plate1 .line3 {
  stroke-dasharray: 5px 179;
  stroke-dashoffset: -142px;
}
.active .x {
  transform: scale(1);
  transition: transform 400ms 350ms;
}
/* El segundo plato */
.plate2 .line1 {
  stroke-dasharray: 21 185.62753295898438;
  transition-delay: 0;
}
.plate2 .line2 {
  stroke-dasharray: 21 178.6514129638672;
  transition-delay: 30ms;
}
.plate2 .line3 {
  stroke-dasharray: 21 197.92425537109375;
  transition-delay: 60ms;
}
.plate2 .line4 {
  stroke-dasharray: 21 190.6597137451172;
  transition-delay: 90ms;
}
.plate2 .line5 {
  stroke-dasharray: 21 208.52874755859375;
  transition-delay: 120ms;
}
.plate2 .line6 {
  stroke-dasharray: 21 186.59703063964844;
  transition-delay: 150ms;
}
.active.plate2 .line1 {
  stroke-dasharray: 5 185.62753295898438;
  stroke-dashoffset: -141px;
}
.active.plate2 .line2 {
  stroke-dasharray: 5 178.6514129638672;
  stroke-dashoffset: -137px;
}
.active.plate2 .line3 {
  stroke-dasharray: 5 197.92425537109375;
  stroke-dashoffset: -176px;
}
.active.plate2 .line4 {
  stroke-dasharray: 5 190.6597137451172;
  stroke-dashoffset: -159px;
}
.active.plate2 .line5 {
  stroke-dasharray: 5 208.52874755859375;
  stroke-dashoffset: -139px;
}
.active.plate2 .line6 {
  stroke-dasharray: 5 186.59703063964844;
  stroke-dashoffset: -176px;
}
.active.plate2 .x {
  transition: transform 400ms 250ms;
}

/* O terceiro prato */
.plate3 .line {
  transition: stroke-dasharray 300ms 200ms, stroke-dashoffset 300ms 200ms, transform 300ms 200ms;
}
.plate3 .line1 {
  stroke-dasharray: 21 109;
}
.plate3 .line2 {
  stroke-dasharray: 21 112;
}
.plate3 .line3 {
  stroke-dasharray: 21 102;
}
.plate3 .line4 {
  stroke-dasharray: 21 103;
}
.plate3 .line5 {
  stroke-dasharray: 21 110;
}
.plate3 .line6 {
  stroke-dasharray: 21 115;
}
.plate3 .x {
  transition: transform 400ms 50ms;
}

.active.plate3 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate3 .line1 {
  stroke-dasharray: 5 109;
  stroke-dashoffset: -95px;
}
.active.plate3 .line2 {
  stroke-dasharray: 5 112;
  stroke-dashoffset: -96px;
}
.active.plate3 .line3 {
  stroke-dasharray: 5 102;
  stroke-dashoffset: -79px;
}
.active.plate3 .line4 {
  stroke-dasharray: 5 103;
  stroke-dashoffset: -78px;
}
.active.plate3 .line5 {
  stroke-dasharray: 5 110;
  stroke-dashoffset: -63px;
}
.active.plate3 .line6 {
  stroke-dasharray: 5 115;
  stroke-dashoffset: -64px;
}
.active.plate3 .x {
  transition: transform 400ms 100ms;
}
/* Die vierte teller */
.plate4 .x {
  transition: transform 400ms;
}
.plate4 .line {
  transform-origin: 50%;
  transition: transform 400ms 100ms;
}
.active.plate4 .line {
  transition: transform 400ms;
}
.active.plate4 .line1 {
  transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(.7);
}
.active.plate4 .line2 {
  transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(.7);
}
.active.plate4 .line3 {
  transform: translateY(0px) rotate(45deg) scale(.7);
}
.active.plate4 .line4 {
  transform: translateY(0px) rotate(-45deg) scale(.7);
}
.active.plate4 .line5 {
  transform: translateX(18px) translateY(3px) rotate(45deg) scale(.7);
}
.active.plate4 .line6 {
  transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(.7);
}
.active.plate4 .x {
  transition: transform 400ms 100ms;
  transform: scale(1);
}
/* Den femte r?tten */
.plate5 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate5 .line1 {
  stroke-dasharray: 40 40;
}
.plate5 .line2 {
  stroke-dasharray: 21 39;
}
.plate5 .line3 {
  stroke-dasharray: 21 39;
}
.plate5 .line4 {
  stroke-dasharray: 40 40;
}
.plate5 .x {
  transition: transform 400ms 50ms;
}

.active.plate5 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate5 .line1 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}
.active.plate5 .line2 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}
.active.plate5 .line3 {
  stroke-dasharray: 5 39;
  stroke-dashoffset: -37px;
}
.active.plate5 .line4 {
  stroke-dasharray: 1 40;
  stroke-dashoffset: -33px;
}
.active.plate5 .x {
  transition: transform 400ms 50ms;
}
/* Шестая пластина */
.plate6 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate6 .line1 {
  stroke-dasharray: 21 127;
}
.plate6 .line2 {
  stroke-dasharray: 21 106;
}
.plate6 .line3 {
  stroke-dasharray: 21 106;
}
.plate6 .line4 {
  stroke-dasharray: 21 126;
}
.plate6 .x {
  transition: transform 400ms 50ms;
}

.active.plate6 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate6 .line1 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}
.active.plate6 .line2 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}
.active.plate6 .line3 {
  stroke-dasharray: 2 106;
  stroke-dashoffset: -91px;
}
.active.plate6 .line4 {
  stroke-dasharray: 2 127;
  stroke-dashoffset: -94px;
}
.active.plate6 .x {
  transition: transform 400ms 50ms;
}
/* ? 7 ? */
.plate7 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate7 .line1 {
  stroke-dasharray: 21 102;
}
.plate7 .line2 {
  stroke-dasharray: 21 92;
}
.plate7 .line3 {
  stroke-dasharray: 21 97;
}
.plate7 .line4 {
  stroke-dasharray: 21 97;
}
.plate7 .line5 {
  stroke-dasharray: 21 92;
}
.plate7 .line6 {
  stroke-dasharray: 21 102;
}
.plate7 .x {
  transition: transform 400ms 50ms;
}

.active.plate7 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate7 .line1 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -102px;
}
.active.plate7 .line2 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -92px;
}
.active.plate7 .line3 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}
.active.plate7 .line4 {
  stroke-dasharray: 2 97;
  stroke-dashoffset: -97px;
  transition-delay: 20ms;
}
.active.plate7 .line5 {
  stroke-dasharray: 2 92;
  stroke-dashoffset: -90px;
  transition-delay: 40ms;
}
.active.plate7 .line6 {
  stroke-dasharray: 2 102;
  stroke-dashoffset: -100px;
  transition-delay: 40ms;
}
.active.plate7 .x {
  transition: transform 400ms 50ms;
}
/* ?γδοο πι?το */
.plate8 .line {
  transition: stroke-dasharray 400ms 100ms, stroke-dashoffset 400ms 100ms, transform 400ms 100ms;
}
.plate8 .line1 {
  stroke-dasharray: 21 201;
}
.plate8 .line2 {
  stroke-dasharray: 21 201;
  transition-delay: 20ms;
}
.plate8 .line3 {
  stroke-dasharray: 21 201;
  transition-delay: 40ms;
}
.plate8 .line4 {
  stroke-dasharray: 21 201;
  transition-delay: 60ms;
}
.plate8 .line5 {
  stroke-dasharray: 21 201;
  transition-delay: 80ms;
}
.plate8 .line6 {
  stroke-dasharray: 21 201;
  transition-delay: 100ms;
}
.plate8 .x {
  transition: transform 400ms 50ms;
}

.active.plate8 .line {
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, transform 400ms;
}
.active.plate8 .line1 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
}
.active.plate8 .line2 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 20ms;
}
.active.plate8 .line3 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 40ms;
}
.active.plate8 .line4 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 60ms;
}
.active.plate8 .line5 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 80ms;
}
.active.plate8 .line6 {
  stroke-dasharray: 5 201;
  stroke-dashoffset: -158px;
  transition-delay: 100ms;
}
.active.plate8 .x {
  transition: transform 400ms 50ms;
}

JavaScript

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