广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

这次给大家带来毛毛虫爬行动画怎样实现，实现毛毛虫爬行动画的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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>

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

推荐阅读：

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

CSS3混合模式使用详解

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