纯CSS毛毛虫动画

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --caterpillar-color: #FABEAB;
}

body {
  background: #F4E7CA;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

div {
  box-sizing: border-box;
}

.caterpillar {
  position: absolute;
  -webkit-animation: move 4s ease-in-out infinite;
          animation: move 4s ease-in-out infinite;
  -webkit-filter: drop-shadow(120px 0 0 var(--caterpillar-color)) drop-shadow(240px 0 0 var(--caterpillar-color)) drop-shadow(480px 0 0 var(--caterpillar-color)) drop-shadow(960px 0 0 var(--caterpillar-color)) drop-shadow(-1920px 0 0 var(--caterpillar-color)) drop-shadow(60px 80px 0 var(--caterpillar-color)) drop-shadow(0 160px 0 var(--caterpillar-color)) drop-shadow(0 320px 0 var(--caterpillar-color)) drop-shadow(0 640px 0 var(--caterpillar-color)) drop-shadow(0 -1280px 0 var(--caterpillar-color));
          filter: drop-shadow(120px 0 0 var(--caterpillar-color)) drop-shadow(240px 0 0 var(--caterpillar-color)) drop-shadow(480px 0 0 var(--caterpillar-color)) drop-shadow(960px 0 0 var(--caterpillar-color)) drop-shadow(-1920px 0 0 var(--caterpillar-color)) drop-shadow(60px 80px 0 var(--caterpillar-color)) drop-shadow(0 160px 0 var(--caterpillar-color)) drop-shadow(0 320px 0 var(--caterpillar-color)) drop-shadow(0 640px 0 var(--caterpillar-color)) drop-shadow(0 -1280px 0 var(--caterpillar-color));
}
.caterpillar::before {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  left: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-animation: reach 1s ease-in-out infinite alternate;
          animation: reach 1s ease-in-out infinite alternate;
}
.caterpillar::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  right: 20px;
  width: 10px;
  height: 0;
  border: 10px solid var(--caterpillar-color);
  border-radius: 999px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-animation: reach 1s ease-in-out infinite alternate;
          animation: reach 1s ease-in-out infinite alternate;
}
.caterpillar .center {
  width: 50px;
  height: 80px;
  border: 20px solid var(--caterpillar-color);
  border-radius: 999px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), 0 calc(50% - 10px));
          clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), 0 calc(50% - 10px));
  -webkit-animation: spring 1s ease-in-out infinite alternate;
          animation: spring 1s ease-in-out infinite alternate;
}

@-webkit-keyframes spring {
  0% {
    width: 45px;
    height: 110px;
  }
  10% {
    width: 45px;
    height: 110px;
  }
  90% {
    width: 60px;
    height: 80px;
  }
  100% {
    width: 60px;
    height: 80px;
  }
}

@keyframes spring {
  0% {
    width: 45px;
    height: 110px;
  }
  10% {
    width: 45px;
    height: 110px;
  }
  90% {
    width: 60px;
    height: 80px;
  }
  100% {
    width: 60px;
    height: 80px;
  }
}
@-webkit-keyframes reach {
  0% {
    width: 10px;
  }
  100% {
    width: 20px;
  }
}
@keyframes reach {
  0% {
    width: 10px;
  }
  100% {
    width: 20px;
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  23% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  25% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  27% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  48% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  50% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  52% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  73% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  75% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  77% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  98% {
    -webkit-transform: translateX(120px);
            transform: translateX(120px);
  }
  100% {
    -webkit-transform: translateX(120px);
            transform: translateX(120px);
  }
}
@keyframes move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  23% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  25% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  27% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  48% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  50% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  52% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
  73% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  75% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  77% {
    -webkit-transform: translateX(90px);
            transform: translateX(90px);
  }
  98% {
    -webkit-transform: translateX(120px);
            transform: translateX(120px);
  }
  100% {
    -webkit-transform: translateX(120px);
            transform: translateX(120px);
  }
}

JavaScript

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