How to Create Doraemon Animation with HTML and CSS: Step-by-Step

How to Create Doraemon Animation with HTML and CSS: Step-by-Step

Aarzoo Islam's photo
Aarzoo Islam
·

5 min read

Introduction

Welcome to Day 27 of the #100DaysOfCode Challenge! Today, we're diving into the exciting world of animation with HTML and CSS. In this tutorial, we'll walk you through the step-by-step process of creating an animated Doraemon character using HTML and CSS. By the end of this tutorial, you'll have a fun and interactive Doraemon that you can showcase on your portfolio or share with your friends.

Download the Full Source Code

To begin, download the full source code from the provided link: Download Source Code. Once downloaded, extract the files to your project directory.

Step 1: Setting Up the HTML Structure

Let's start by setting up the HTML structure for our Doraemon character. Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- Set the compatibility mode to the latest Internet Explorer version -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Ensure proper rendering and touch zooming on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Link to an external stylesheet -->
    <link rel="stylesheet" href="style.css">

    <title>Animated Doraemon</title>
</head>

<body>
    <!-- Container for the animated Doraemon -->
    <div class="head center">
        <!-- Container for Doraemon's eyes -->
        <div class="eye_white">
            <!-- List of Doraemon's eyes -->
            <ul>
                <!-- Doraemon's left eye -->
                <li>
                    <div class="eye_black"></div>
                </li>
                <!-- Doraemon's right eye -->
                <li>
                    <div class="eye_black"></div>
                </li>
            </ul>
        </div>
        <!-- Container for Doraemon's face -->
        <div class="white">
            <!-- Doraemon's left whisker -->
            <div class="line_left">
            </div>
            <!-- Doraemon's right whisker -->
            <div class="line_right">
            </div>
            <!-- Doraemon's nose -->
            <div class="nose"></div>
            <!-- Doraemon's mouth -->
            <div class="line_vertical"></div>
            <!-- Doraemon's mouth -->
            <div class="mouth"></div>
        </div>
    </div>
</body>

</html>

Step 2: Styling Doraemon with CSS

Now, let's add some styles to our Doraemon character to bring it to life. Create a new CSS file named style.css and add the following code:

/* Set background gradient for the entire body */
body {
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

/* Center the following elements */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Define head styles */
.head {
    width: 600px;
    height: 600px;
    border-radius: 100%;
    background: #3c9dca;
    border: black solid thick;
}

/* Define white part of eyes */
.white {
    width: 524px;
    height: 462px;
    border-radius: 100%;
    position: relative;
    top: 120px;
    left: 38px;
    background: #fff;
    border: black solid thin;
    z-index: 0;
}

/* Define styles for white part of eyes */
.eye_white {
    position: relative;
    top: 60px;
    left: 130px;
    z-index: 1;
}

/* Define styles for individual eye whites */
.eye_white li {
    width: 125px;
    height: 152px;
    border-radius: 100%;
    background: #fff;
    list-style: none;
    border: black solid thin;
    display: block;
    float: left;
}

/* Define styles for the black part of eyes */
.eye_black {
    width: 25px;
    height: 45px;
    border-radius: 100%;
    background: #000;
    list-style: none;
    top: 80px;
    position: relative;
    border: black solid thin;
    display: block;
    left: 10px;
    -webkit-animation: move 6s ease infinite;
    animation: move 6s ease infinite;
}

/* Define styles for the white part of the black eyes */
.eye_black::before {
    content: "";
    width: 10px;
    height: 15px;
    border-radius: 100%;
    background: #fff;
    list-style: none;
    top: 16px;
    position: relative;
    display: block;
    left: 7px;
}

/* Define styles for the left lines */
.line_left {
    width: 150px;
    height: 2px;
    transform: rotate(20deg);
    top: 90px;
    left: 14px;
    position: relative;
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
}

/* Additional styles for left lines */
.line_left::before {
    content: "";
    width: 150px;
    height: 2px;
    top: 70px;
    transform: rotate(-20deg);
    position: relative;
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
}

.line_left::after {
    content: "";
    transform: rotate(-40deg);
    width: 150px;
    height: 2px;
    top: 120px;
    left: 30px;
    position: relative;
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
}

/* Define styles for the right lines */
.line_right {
    width: 150px;
    height: 2px;
    transform: rotate(160deg);
    top: 90px;
    left: 370px;
    position: relative;
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
}

/* Additional styles for right lines */
.line_right::before {
    content: "";
    width: 150px;
    height: 2px;
    bottom: 100px;
    position: relative;
    transform: rotate(30deg);
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
    left: 20px;
}

.line_right::after {
    content: "";
    width: 150px;
    height: 2px;
    bottom: 50px;
    transform: rotate(10deg);
    left: 0px;
    position: relative;
    border-radius: 10%;
    background: #000;
    list-style: none;
    display: block;
}

/* Define styles for the nose */
.nose {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background: #b90319;
    list-style: none;
    top: 60px;
    position: relative;
    border: black solid thin;
    display: block;
    left: 236px;
    z-index: 2;
}

/* Define styles for the nose tip */
.nose::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #fff;
    list-style: none;
    top: 19px;
    position: relative;
    border: black solid thin;
    display: block;
    left: 9px;
}

/* Define styles for the vertical line on the face */
.line_vertical {
    width: 2px;
    height: 310px;
    top: 40px;
    left: 258px;
    position: relative;
    border-radius: 10%;
    background: #000;
    z-index: 1;
}

/* Define styles for the mouth */
.mouth {
    width: 400px;
    height: 400px;
    border-radius: 100%;
    top: -358px;
    left: 62px;
    position: relative;
    background: #000;
    z-index: -1;
}

/* Additional styles for the mouth */
.mouth::after {
    content: "";
    width: 402px;
    height: 401px;
    top: -4px;
    left: -1px;
    border-radius: 100%;
    position: relative;
    display: block;
    background: #fff;
}

Step 3: Animating Doraemon's Eyes

One of the key features of Doraemon is his animated eyes. Let's add some animations to make them move. Add the following CSS code to your style.css file:

/* Define animation for the black part of eyes */
@-webkit-keyframes move {
    16% {
        top: 95px;
        left: 30px;
    }

    32% {
        top: 100px;
        left: 60px;
    }

    48% {
        top: 80px;
        left: 90px;
    }

    64% {
        top: 100px;
        left: 60px;
    }

    80% {
        top: 95px;
        left: 30px;
    }
}

@keyframes move {
    16% {
        top: 95px;
        left: 30px;
    }

    32% {
        top: 100px;
        left: 60px;
    }

    48% {
        top: 80px;
        left: 90px;
    }

    64% {
        top: 100px;
        left: 60px;
    }

    80% {
        top: 95px;
        left: 30px;
    }
}

Step 4: Adding Whiskers, Nose, and Mouth

Complete the CSS styling by adding styles for Doraemon's whiskers, nose, and mouth. You can find the complete CSS code in the source file provided.

Conclusion

Congratulations! You've successfully created an animated Doraemon character using HTML and CSS. This project is a great way to practice your coding skills and add some fun to your #100DaysOfCode Challenge. Don't forget to download the full source code from the provided link and share your creations with the world. Keep coding and stay tuned for more exciting tutorials!

Did you find this article valuable?

Support Aarzoo by becoming a sponsor. Any amount is appreciated!

100DaysOfCodeWeb DevelopmentwebdevHTML5HTMLCSS3CSSCSS AnimationTutorial#codenewbiesDeveloperdevelopmentcodewithaarzooprojects