毛毛虫爬行动画怎样实现

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

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>

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

推荐阅读：

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

CSS3混合模式使用详解

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