Heim > Artikel > Web-Frontend > So realisieren Sie eine Raupen-Krabbelanimation
Dieses Mal zeige ich Ihnen, wie Sie die Raupen-Krabbelanimation umsetzen. Was sind die Vorsichtsmaßnahmen , um die Raupen-Krabbelanimation umzusetzen?
Jeder hat als Kind Raupen gesehen. Heute habe ich darüber nachgedacht, eine Krabbelaktion zu schreiben. Der spezifische Code lautet wie folgt:
HTML-Code 🎜>
<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-Code:
<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>
Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Dinge, bitte achten Sie auf PHP-Chinesisch. Andere verwandte Artikel online! Empfohlene Lektüre:
Front-End-Technologie zur Implementierung von Texttextur-Overlay
Detaillierte Erläuterung der Verwendung des CSS3-Mischmodus
Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine Raupen-Krabbelanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!