Create a Cute Dog Moustache 🐶 Wagging Animation with HTML and CSS

#javascript #beginners #animation #learning

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.

shop Link : https://buymeacoffee.com/pratik1110r/extras