누구나 어렸을 때 애벌레를 본 적이 있을 겁니다. 오늘은 크롤링 액션을 먼저 작성해 보겠습니다. 구체적인 코드는 다음과 같습니다.
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 코드 공유에서 Caterpillar 크롤링 작업을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!