This content originally appeared on DEV Community and was authored by Pratik Tamhane
Introduction: In this post, we'll create a playful dog Moustache wagging animation using just HTML and CSS. This fun little project is perfect for anyone looking to add some personality to their website or portfolio. Let's dive in and build this adorable dog animation step by step!
Prerequisites:
Basic understanding of HTML and CSS.
A text editor and a browser to test your code.
We'll start by writing the HTML to structure the dog. Then, we'll use CSS to style and animate the elements, bringing the dog to life with a wagging Moustache.
The Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog Tail Wagging Animation</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #e0f7fa;
font-family: 'Arial', sans-serif;
}
.dog {
position: relative;
width: 200px;
height: 150px;
background-color: #a1887f;
border-radius: 50% 50% 40% 40%;
transform: translateY(20px);
}
.dog::before {
content: '';
position: absolute;
width: 50px;
height: 50px;
background-color: #8d6e63;
border-radius: 50%;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
.dog::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background-color: #8d6e63;
border-radius: 50%;
top: -20px;
left: 25%;
box-shadow: 60px 0 #8d6e63;
}
.ear {
position: absolute;
width: 40px;
height: 60px;
background-color: #5d4037;
border-radius: 50%;
top: -40px;
left: 10px;
transform: rotate(20deg);
}
.ear.right {
left: auto;
right: 10px;
transform: rotate(-20deg);
}
.eye {
position: absolute;
width: 10px;
height: 10px;
background-color: #212121;
border-radius: 50%;
top: 20px;
left: 40px;
}
.eye.right {
left: auto;
right: 40px;
}
.nose {
position: absolute;
width: 20px;
height: 20px;
background-color: #212121;
border-radius: 50%;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.tail {
position: absolute;
width: 120px;
height: 20px;
background-color: #8d6e63;
border-radius: 50%;
top: 70px;
left: -60px;
transform-origin: right center;
animation: wag 0.3s ease-in-out infinite alternate;
}
@keyframes wag {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="dog">
<div class="ear"></div>
<div class="ear right"></div>
<div class="eye"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="tail"></div>
</div>
</body>
</html>
HTML Structure:
The HTML defines a dog div that contains all parts of the dog, such as ears, eyes, nose, and Moustache .
CSS Styling and Animation:
The dog body is styled with rounded shapes and positioned using absolute positioning for each part.
The Moustache is animated using the @keyframes rule, creating a back-and-forth wagging effect.
CSS Positioning:
We use absolute positioning to place the ears, eyes, nose, and Moustache relative to the dog’s body.
CSS Animations:
The @keyframes rule is used to define the wagging motion for the Moustache . The animation alternates between two positions to create the wagging effect.
| Topic | Author | Profile Link |
|---|---|---|
| 📐 UI/UX Design | Pratik | Pratik's insightful blogs |
| :robot_face: AI/ML and Generative AI | Ankush | Ankush's expert articles |
| ⚙️ Automation and React | Sachin | Sachin's detailed blogs |
| 🧠 AI and Machine Learning | Abhinav | Abhinav's informative posts |
| 💻 Web Development & JavaScript | Dipak | Dipak's web development insights |
| 🖥️ .NET and C# | Soham | Soham's .NET and C# articles |
shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
This content originally appeared on DEV Community and was authored by Pratik Tamhane
Pratik Tamhane | Sciencx (2024-08-27T04:52:32+00:00) Create a Cute Dog Moustache 🐶 Wagging Animation with HTML and CSS. Retrieved from https://www.scien.cx/2024/08/27/create-a-cute-dog-moustache-%f0%9f%90%b6-wagging-animation-with-html-and-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.