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>
以上就是css如何实现毛毛虫爬行动作代码分享的详细内容。