Create a Cute Dog Moustache 🐶 Wagging Animation with HTML and CSS – ██FR█████ █INTELL███████████

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