css如何?毛毛蟲爬行動作代碼分享

毛毛蟲兒時大家都有見過，今天想起來寫一個爬行的動作，我們先來看一下，具體代碼如下所示：

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>