Are you ready to unleash your creativity and add a touch of cuteness to your web development projects? In this tutorial, we'll guide you through the process of creating an animated puppy illustration using HTML and CSS.
This project is part of Day 20 of the #100DaysOfCode challenge, designed to help you enhance your coding skills while having fun along the way.
Step 1: Setting Up the HTML Structure
Let's start by setting up the basic HTML structure for our project:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Set character encoding to UTF-8 -->
<meta charset="UTF-8" />
<!-- Set compatibility with IE -->
<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 external stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Set title of the webpage -->
<title>Animated Puppy</title>
</head>
<body>
<!-- Main container -->
<div class="main">
<!-- Dog animation container -->
<div class="dog">
<!-- Dog paws -->
<div class="dog__paws">
<!-- Back left leg -->
<div class="dog__bl-leg leg">
<!-- Back left paw -->
<div class="dog__bl-paw paw"></div>
<!-- Top part of back left leg -->
<div class="dog__bl-top top"></div>
</div>
<!-- Front left leg -->
<div class="dog__fl-leg leg">
<!-- Front left paw -->
<div class="dog__fl-paw paw"></div>
<!-- Top part of front left leg -->
<div class="dog__fl-top top"></div>
</div>
<!-- Front right leg -->
<div class="dog__fr-leg leg">
<!-- Front right paw -->
<div class="dog__fr-paw paw"></div>
<!-- Top part of front right leg -->
<div class="dog__fr-top top"></div>
</div>
</div>
<!-- Dog body -->
<div class="dog__body">
<!-- Dog tail -->
<div class="dog__tail"></div>
</div>
<!-- Dog head -->
<div class="dog__head">
<!-- Dog snout -->
<div class="dog__snout">
<!-- Dog nose -->
<div class="dog__nose"></div>
<!-- Dog eyes -->
<div class="dog__eyes">
<!-- Left eye -->
<div class="dog__eye-l"></div>
<!-- Right eye -->
<div class="dog__eye-r"></div>
</div>
</div>
</div>
<!-- Dog head contour -->
<div class="dog__head-c">
<!-- Left ear -->
<div class="dog__ear-l"></div>
<!-- Right ear -->
<div class="dog__ear-r"></div>
</div>
</div>
</div>
</body>
</html>
Step 2: Adding Styles with CSS
Next, let's add the CSS styles to bring our puppy illustration to life:
/* Reset default styling for all elements */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
/* Styling for the body */
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
/* Set background gradient */
}
/* Container for the main content */
.main {
position: relative;
width: 37.5vmax;
height: 37.5vmax;
display: flex;
justify-content: center;
align-items: center;
}
/* Styling for the leg */
.leg {
position: absolute;
bottom: 0;
width: 3vmax;
height: 4.125vmax;
}
/* Styling for the paw */
.paw {
position: absolute;
bottom: 0;
left: 0;
width: 3.75vmax;
height: 1.875vmax;
overflow: hidden;
}
/* Styling for the paw before pseudo-element */
.paw::before {
content: "";
position: absolute;
width: 3.75vmax;
height: 3.75vmax;
border-radius: 50%;
}
/* Styling for the top */
.top {
position: absolute;
bottom: 0;
left: 0.75vmax;
height: 4.5vmax;
width: 2.625vmax;
border-top-left-radius: 1.425vmax;
border-top-right-radius: 1.425vmax;
transform-origin: bottom right;
transform: rotateZ(90deg) translateX(-0.1vmax) translateY(1.5vmax);
z-index: -1;
background-image: linear-gradient(70deg, transparent 20%, #ff8b56 20%);
}
/* Styling for the dog */
.dog {
position: relative;
width: 22.5vmax;
height: 8.25vmax;
}
/* Styling for the dog before pseudo-element */
.dog::before {
content: "";
position: absolute;
bottom: -0.75vmax;
right: -0.15vmax;
width: 100%;
height: 1.5vmax;
background-color: rgba(28, 49, 48, 0.1);
border-radius: 50%;
z-index: -1000;
animation: shadow 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's head */
.dog__head {
position: absolute;
left: 1.5vmax;
bottom: 0;
width: 9.75vmax;
height: 8.25vmax;
border-top-left-radius: 4.05vmax;
border-top-right-radius: 4.05vmax;
border-bottom-right-radius: 3.3vmax;
border-bottom-left-radius: 3.3vmax;
background-color: #ff8147;
animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's head container */
.dog__head-c {
position: absolute;
left: 1.5vmax;
bottom: 0;
width: 9.75vmax;
height: 8.25vmax;
animation: head 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
z-index: -1;
}
/* Styling for the dog's snout */
.dog__snout {
position: absolute;
left: -1.5vmax;
bottom: 0;
width: 7.5vmax;
height: 3.75vmax;
border-top-right-radius: 3vmax;
border-bottom-right-radius: 3vmax;
border-bottom-left-radius: 4.5vmax;
background-color: #d7dbd2;
animation: snout 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's snout before pseudo-element */
.dog__snout::before {
content: "";
position: absolute;
left: -0.1125vmax;
top: -0.15vmax;
width: 1.875vmax;
height: 1.125vmax;
border-top-right-radius: 3vmax;
border-bottom-right-radius: 3vmax;
border-bottom-left-radius: 4.5vmax;
background-color: #1c3130;
animation: snout-b 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's nose */
.dog__nose {
position: absolute;
top: -1.95vmax;
left: 40%;
width: 0.75vmax;
height: 2.4vmax;
border-radius: 0.525vmax;
transform-origin: bottom;
transform: rotateZ(10deg);
background-color: #d7dbd2;
}
/* Styling for the dog's eyes */
.dog__eye-l,
.dog__eye-r {
position: absolute;
top: -0.9vmax;
width: 0.675vmax;
height: 0.375vmax;
border-radius: 50%;
background-color: #1c3130;
animation: eye 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the left eye */
.dog__eye-l {
left: 27%;
}
/* Styling for the right eye */
.dog__eye-r {
left: 65%;
}
/* Styling for the dog's ears */
.dog__ear-l,
.dog__ear-r {
position: absolute;
width: 10.5vmax;
height: 3.375vmax;
border-top-left-radius: 0vmax;
border-top-right-radius: 0vmax;
border-bottom-right-radius: 3.3vmax;
border-bottom-left-radius: 3.3vmax;
background-color: #e26538;
}
/* Styling for the left ear */
.dog__ear-l {
top: 1.5vmax;
left: 6vmax;
transform-origin: bottom left;
transform: rotateZ(-50deg);
z-index: -1;
animation: ear-l 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the right ear */
.dog__ear-r {
top: 1.5vmax;
right: 3vmax;
transform-origin: bottom right;
transform: rotateZ(20deg);
z-index: -2;
animation: ear-r 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's body */
.dog__body {
display: flex;
justify-content: center;
align-items: flex-end;
position: absolute;
bottom: 0.3vmax;
left: 3.75vmax;
width: 18.75vmax;
height: 7.2vmax;
border-top-left-radius: 3vmax;
border-top-right-radius: 6vmax;
border-bottom-right-radius: 1.5vmax;
border-bottom-left-radius: 6vmax;
background-color: #ff702e;
z-index: -2;
animation: body 10s cubic-bezier(0.3, 0.41, 0.18, 1.01) infinite;
}
/* Styling for the dog's tail */
.dog__tail {
position: absolute;
right: -3vmax;
height: 1.5vmax;
width: 4.5vmax;
background-color: #e96839;
border-radius: 1.5vmax;
}
/* Styling for the dog's paws */
.dog__paws {
position: absolute;
bottom: 0;
left: 7.5vmax;
width: 12vmax;
height: 3vmax;
}
/* Styling for the back left leg */
.dog__bl-leg {
left: -3vmax;
z-index: -10;
}
/* Styling for the back left paw before pseudo-element */
.dog__bl-paw::before {
background-color: #bec4b6;
}
/* Styling for the back left top */
.dog__bl-top {
background-image: linear-gradient(80deg, transparent 20%, #e96839 20%);
}
/* Styling for the front left leg */
.dog__fl-leg {
z-index: 10;
}
/* Styling for the front left leg */
.dog__fl-leg {
left: 0;
}
/* Styling for the front left paw before pseudo-element */
.dog__fl-paw::before {
background-color: #d7dbd2;
}
/* Styling for the front right leg */
.dog__fr-leg {
right: 0;
}
/* Styling for the front right paw before pseudo-element */
.dog__fr-paw::before {
background-color: #d7dbd2;
}
/* Keyframe animations */
@keyframes head {
0%,
10%,
20%,
26%,
28%,
90%,
100% {
height: 8.25vmax;
bottom: 0;
transform-origin: bottom right;
transform: rotateZ(0);
}
5%,
15%,
22%,
24%,
30% {
height: 8.1vmax;
}
32%,
50% {
height: 8.25vmax;
}
55%,
60% {
bottom: 0.75vmax;
transform-origin: bottom right;
transform: rotateZ(0);
}
70%,
80% {
bottom: 0.75vmax;
transform-origin: bottom right;
transform: rotateZ(10deg);
}
}
@keyframes body {
0%,
10%,
20%,
26%,
28%,
32%,
100% {
height: 7.2vmax;
}
5%,
15%,
22%,
24%,
30% {
height: 7.05vmax;
}
}
@keyframes ear-l {
0%,
10%,
20%,
26%,
28%,
82%,
100% {
transform: rotateZ(-50deg);
}
5%,
15%,
22%,
24% {
transform: rotateZ(-48deg);
}
30%,
31% {
transform: rotateZ(-30deg);
}
32%,
80% {
transform: rotateZ(-60deg);
}
}
@keyframes ear-r {
0%,
10%,
20%,
26%,
28% {
transform: rotateZ(20deg);
}
5%,
15%,
22%,
24% {
transform: rotateZ(18deg);
}
30%,
31% {
transform: rotateZ(10deg);
}
32% {
transform: rotateZ(25deg);
}
}
@keyframes snout {
0%,
10%,
20%,
26%,
28%,
82%,
100% {
height: 3.75vmax;
}
5%,
15%,
22%,
24% {
height: 3.45vmax;
}
}
@keyframes snout-b {
0%,
10%,
20%,
26%,
28%,
98%,
100% {
width: 1.875vmax;
}
5%,
15%,
22%,
24% {
width: 1.8vmax;
}
34%,
98% {
width: 1.275vmax;
}
}
@keyframes shadow {
0%,
10%,
20%,
26%,
28%,
30%,
84%,
100% {
width: 99%;
}
5%,
15%,
22%,
24% {
width: 101%;
}
34%,
81% {
width: 96%;
}
}
@keyframes eye {
0%,
30% {
width: 0.675vmax;
height: 0.3vmax;
}
32%,
59%,
90%,
100% {
width: 0.525vmax;
height: 0.525vmax;
transform: translateY(0);
}
60%,
75% {
transform: translateY(-0.3vmax);
}
80%,
85% {
transform: translateY(0.15vmax);
}
}
Step 3: Styling the Puppy Elements
Now, let's break down the CSS code to understand how each element of the puppy illustration is styled:
Body Styling: Setting up the background gradient and centering the content.
Main Container: Positioning and sizing the container for the puppy.
Legs and Paws: Styling the legs and paws of the puppy, positioning them relative to the main container.
Head, Snout, Nose, Eyes, and Ears: Styling the different parts of the puppy's head and face.
Body and Tail: Styling the body and tail of the puppy.
Keyframe Animations: Adding animations for various parts of the puppy to create a lively effect.
Step 4: Testing and Refinement
Once you've completed the HTML and CSS coding, it's time to test your animated puppy illustration in a web browser. Make any necessary adjustments to ensure everything looks and functions as expected.
Step 5: Sharing Your Creation
Congratulations on creating your animated puppy illustration! Share your project with the world by posting it on your portfolio website, social media platforms, or coding communities like GitHub and CodePen. Don't forget to mention that it's part of your #100DaysOfCode challenge journey!
Conclusion
Creating an animated puppy illustration is not only a fun project but also a great way to practice your HTML and CSS skills. By following this step-by-step guide, you've learned how to structure and style elements to bring your creative ideas to life on the web. Keep coding, exploring, and experimenting – the possibilities are endless!
Download the Full Source Code: Download Here
Connect with Me: Reach Out on Bento
Happy coding! 🐾🎨✨