毛毛虫爬行动画怎样实现

毛毛虫儿时大家都有见过，今天想起来写一个爬行的动作，具体代码如下所示：

htML代码：

p class='container'>
      p class='hide left'>
    /p>
      p class='hide right'>
    /p>
      p class='hide bottom'>
    /p>
      p class='circle-container'>
        p class='circle'>
    /p>
      /p>
    /p>
    

css代码：

 style>
body {
      background-color: #1B6CB2;
      margin: 0;
}
.container {
      posITion: absolute;
      width: 600px;
      height: 400px;
      overflow: hidden;
      top: 50%;
      left: 60%;
      transform: translate(-50%, -50%);
}
.hide {
      height: 100%;
      width: 150px;
      background: #1B6CB2;
      position: absolute;
      z-index: 2;
}
.hide.left {
      left: 0;
}
.hide.right {
      right: 0;
}
.hide.bottom {
      bottom: 0;
      width: 100%;
      height: 50%;
}
.circle {
      position: absolute;
      height: 75px;
      width: 150px;
      border: 3px solid white;
      border-radius: 50%/100% 100% 0 0;
      border-bottom: none;
      top: 40%;
      left: 50%;
      transform-origin: 0% 50%;
      transform: translate(-50%, -50%);
      animation: magic 1.8s ease infinite;
}
@keyframes magic {
  0% {
        transform: rotate(-170deg) translate(-50%, -50%);
  }
  50% {
        transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
        transform: rotate(180deg) translate(-50%, -50%);
  }
}
.circle-container {
      position: absolute;
      height: 75px;
      width: 150px;
      top: 40%;
      left: 50%;
      transform-origin: 0% 50%;
      transform: translate(-50%, -50%);
      animation: power 1.8s ease-out infinite;
}
@keyframes power {
  0% {
        margin-left: 20px;
  }
  50% {
        margin-left: -55px;
  }
  99.9% {
        margin-left: -130px;
  }
  100% {
        margin-left: 20px;
  }
}
      /style>
    

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

前端技术实现文本文字纹理叠加

CSS3混合模式使用详解

以上就是毛毛虫爬行动画怎样实现的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！