Penguin CSS Animation
Project Overview This repository contains a fun and interactive CSS animation of a penguin character, complete with a mountain and sun backdrop. The penguin performs a waving animation and responds to user interactions. The project utilizes pure HTML and CSS to create a visually appealing and engaging animated scene. It also demonstrates various CSS techniques, such as positioning, gradients, keyframe animations, and transitions.
Features Penguin Animation: The penguin waves using a CSS keyframe animation on the left arm. Interactive Design: The penguin scales up when clicked, giving a playful user interaction effect. Scenery: The scene includes a sun and mountains, all created with CSS. Fully Responsive: The animation is optimized for various screen sizes using responsive design practices. Customizable: The penguin's face, body, and surrounding elements use CSS variables for easy color customization.
Interaction Click on the penguin: When the penguin is clicked, it will scale up, and the cursor will change to indicate that further interactions are not allowed while scaled. Wave animation: The penguin's left arm continuously waves using a keyframe animation.
Key Concepts CSS Keyframes: The penguin's waving animation is powered by the @keyframes rule in CSS, which smoothly animates the rotation of the left arm. Transitions: The penguin's scale transition when clicked is controlled by a CSS transition for a smooth effect. CSS Gradients: The background of the scene, including the mountains and sky, uses CSS linear gradients to create a layered effect.