Untitled
unknown
plain_text
a month ago
2.9 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Football Player Animation</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; overflow: hidden; /* Prevent scrollbars during animation */ } .container { position: relative; /* Allows for absolutely positioned elements within */ width: 400px; /* Increased width to accommodate player movement */ height: 300px; /* Increased height to accommodate full player figure */ } .player { position: absolute; left: 50px; /* Initial horizontal position of the player */ bottom: 20px; /* Initial vertical position of the player */ width: 100px; /* Increased size of the player figure */ height: 150px; background-image: url('player.png'); /* Replace with your player image */ background-size: contain; background-repeat: no-repeat; transform-origin: bottom center; /* Important for rotation */ animation: run 2s infinite, kick 2s 0.5s infinite; /* Added kick animation with a delay*/ } @keyframes run { 0% { left: 50px; } 50% { left: 150px; } /* Player moves forward */ 100% { left: 50px; } /* Player returns to starting position */ } @keyframes kick { 0%, 50%, 100% { transform: rotate(0deg); } /* No rotation */ 25% { transform: rotate(-30deg); } /* Leg swings back */ 75% { transform: rotate(20deg); } /* Leg swings forward to kick */ } .ball { position: absolute; left: 100px; /* Initial horizontal position of the ball */ bottom: 10px; /* Initial vertical position of the ball */ width: 30px; height: 30px; background-image: url('ball.png'); /* Replace with your ball image */ background-size: contain; background-repeat: no-repeat; border-radius: 50%; animation: moveBall 2s 0.5s infinite; /* Starts with a delay to sync with kick */ } @keyframes moveBall { 0%, 50%, 100% { left: 100px; } 25%, 75% { left: 200px; } /* Ball moves forward when kicked */ } </style> </head> <body> <div class="container"> <div class="player"></div> <div class="ball"></div> </div> </body> <script> // You can add JavaScript for more complex interactions if needed. For this simple animation, CSS is sufficient. </script> </html>
Editor is loading...
Leave a Comment