How to achieve caterpillar crawling animation

This article mainly introduces how HTML achieves caterpillar crawling animation, has a certain reference value, and friends need can refer to it. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

When Mao Musp, everyone has seen. I think about writing a crawling today. The specific code is as follows:

HTML code:


CSS code:

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 (-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;}}

     Thank you can read this article carefully. I hope that Xiaobian shares how HTML will achieve the content of Mao Causa, and I hope you will support Tumi Cloud, pay attention to Tumi Yun Industry Information Channel, I will find TUMI clouds, the detailed solution is waiting for you! 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment