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>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link rel=”stylesheet” href=”style.css” />
<title>Animated Puppy</title>
</head>
<body>
<div class=”main”>
<div class=”dog”>
<div class=”dog__paws”>
<div class=”dog__bl-leg leg”>
<div class=”dog__bl-paw paw”></div>
<div class=”dog__bl-top top”></div>
</div>
<div class=”dog__fl-leg leg”>
<div class=”dog__fl-paw paw”></div>
<div class=”dog__fl-top top”></div>
</div>
<div class=”dog__fr-leg leg”>
<div class=”dog__fr-paw paw”></div>
<div class=”dog__fr-top top”></div>
</div>
</div>
<div class=”dog__body”>
<div class=”dog__tail”></div>
</div>
<div class=”dog__head”>
<div class=”dog__snout”>
<div class=”dog__nose”></div>
<div class=”dog__eyes”>
<div class=”dog__eye-l”></div>
<div class=”dog__eye-r”></div>
</div>
</div>
</div>
<div class=”dog__head-c”>
<div class=”dog__ear-l”></div>
<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:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.main {
position: relative;
width: 37.5vmax;
height: 37.5vmax;
display: flex;
justify-content: center;
align-items: center;
}
.leg {
position: absolute;
bottom: 0;
width: 3vmax;
height: 4.125vmax;
}
.paw {
position: absolute;
bottom: 0;
left: 0;
width: 3.75vmax;
height: 1.875vmax;
overflow: hidden;
}
.paw::before {
content: “”;
position: absolute;
width: 3.75vmax;
height: 3.75vmax;
border-radius: 50%;
}
.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%);
}
.dog {
position: relative;
width: 22.5vmax;
height: 8.25vmax;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.dog__eye-l {
left: 27%;
}
.dog__eye-r {
left: 65%;
}
.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;
}
.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;
}
.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;
}
.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;
}
.dog__tail {
position: absolute;
right: -3vmax;
height: 1.5vmax;
width: 4.5vmax;
background-color: #e96839;
border-radius: 1.5vmax;
}
.dog__paws {
position: absolute;
bottom: 0;
left: 7.5vmax;
width: 12vmax;
height: 3vmax;
}
.dog__bl-leg {
left: -3vmax;
z-index: -10;
}
.dog__bl-paw::before {
background-color: #bec4b6;
}
.dog__bl-top {
background-image: linear-gradient(80deg, transparent 20%, #e96839 20%);
}
.dog__fl-leg {
z-index: 10;
}
.dog__fl-leg {
left: 0;
}
.dog__fl-paw::before {
background-color: #d7dbd2;
}
.dog__fr-leg {
right: 0;
}
.dog__fr-paw::before {
background-color: #d7dbd2;
}
@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! 🐾🎨✨
Source: hashnode.com