https://github.com/withaarzoo/animated-doraemon

This is a simple HTML and CSS code snippet to create an animated representation of Doraemon, the famous cartoon character. The code utilizes basic HTML structure along with CSS styling to create the visual effect.
https://github.com/withaarzoo/animated-doraemon

animation-css codewithaarzoo css html

Last synced: about 12 hours ago
JSON representation

This is a simple HTML and CSS code snippet to create an animated representation of Doraemon, the famous cartoon character. The code utilizes basic HTML structure along with CSS styling to create the visual effect.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-doraemon
• Owner: withaarzoo
• Created: 2024-03-02T05:22:35.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-03T05:25:12.000Z (9 months ago)
• Last Synced: 2024-03-03T06:25:14.888Z (9 months ago)
• Topics: animation-css, codewithaarzoo, css, html
• Language: CSS
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Doraemon

This is a simple HTML and CSS code snippet to create an animated representation of Doraemon, the famous cartoon character. The code utilizes basic HTML structure along with CSS styling to create the visual effect .

## Preview

![preview](https://github.com/withaarzoo/Animated-Doraemon/assets/59678435/4df91f4a-c0db-4f66-b93d-dc33dd950c38)

## Prerequisites

To run this code, you need a web browser that supports HTML5 and CSS3.

## How to Use

1. Clone the repository or download the HTML and CSS files.

2. Open the `index.html` file in a web browser.

3. You should see an animated Doraemon character displayed on the screen.

## HTML Structure

The HTML file (`index.html`) contains the structure of the animated Doraemon. It includes:

- A `head` section with metadata and title.

- A `body` section containing the elements for Doraemon's head, eyes, nose, whiskers, and mouth.

## CSS Styling

The CSS file (`style.css`) provides the styling for the Doraemon character. It includes:

- Background gradient for the entire body.

- Styles for Doraemon's head, eyes, nose, and mouth.

- Animation effects for Doraemon's eyes.

## Animation

The animation effect for Doraemon's eyes is achieved using CSS keyframes. The `move` animation moves the black part of Doraemon's eyes to simulate blinking.

## Author

This code snippet is authored by [Aarzoo](https://twitter.com/withaarzoo).

## License

This code is licensed under the [MIT License](LICENSE). Feel free to modify and use it for your projects.