css实现毛毛虫爬行动作

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

 <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>