This is a simple HTML and CSS project that creates an animated jumping Totoro character. Totoro is a popular character from the Studio Ghibli film "My Neighbor Totoro." In this project, Totoro is animated to appear as if it is jumping up and down. The animation is achieved using CSS keyframes and transforms.
The project consists of an HTML file and a CSS file:
-
HTML (index.html): The HTML file defines the structure of the Totoro character. It creates a container for Totoro and various elements for Totoro's body parts, including eyes, nose, ears, whiskers, and a shadow.
-
CSS (style.css): The CSS file contains styles and animations to create the Totoro character and the jumping animation. The keyframes define the different stages of the jumping animation, which is applied to the Totoro's body to make it appear as if it's squishing and stretching while jumping.
-
Clone this repository to your local machine or download the ZIP file.
-
Open the
index.htmlfile in your web browser to view the animated jumping Totoro.
Feel free to customize the Totoro character's appearance or the animation by modifying the CSS code in the style.css file. You can change colors, sizes, or even add more elements to the Totoro character to make it your own.
This project was created by [Your Name] and is inspired by Studio Ghibli's "My Neighbor Totoro."
This project is licensed under the MIT License. See the LICENSE file for details.
Enjoy your animated jumping Totoro!
