Santa Animation With HTML & CSS

Hello and welcome to today’s tutorial. First of all, a Merry Christmas to all of you. In today’s tutorial, we will use the magic of HTML and pure CSS to create a Santa animation. This tutorial is easy to follow and fun.
Enroll Our Free Course : C Programming Tutorial 

The Santa animation belongs to the Christmas special series of CSS tutorials.

Project Folder Structure:

Firstly we create a project folder structure. The project folder is called – Santa Animation. Inside this folder, we have two files – index.html and style.css. The first file is the HTML document and the second one is the stylesheet. And that’s all we need in the project folder. Now we are ready to start the coding.

HTML:

We begin by creating the basic layout using the div tags. For this, we use HTML. Now copy the code provided to you below and paste it into your HTML document. Each of these divs has a class name assigned to it.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Santa Animation</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="santa">
        <div class="hand-l"></div>
        <div class="hand-r"></div>
        <div class="hat"></div>
        <div class="face">
          <div class="beard"></div>
          <div class="eyes"></div>
        </div>
        <div class="belt"></div>
        <div class="shoe"></div>
      </div>
    </div>
  </body>
</html>

CSS:

Now that we have the layout ready, let us style the divs to make it look like a Santa. To do this we need CSS. First, copy the code below and paste it into your stylesheet.


*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #fff2c8;
}
.container {
  width: 380px;
  height: 500px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.container *:before,
.container *:after {
  position: absolute;
  content: "";
}
.santa {
  height: 220px;
  width: 200px;
  background-color: #e84701;
  border-radius: 80px;
  position: absolute;
  left: 115px;
  top: 200px;
}
.santa:before,
.santa:after {
  width: 40px;
  margin: auto;
  left: 0;
  right: 0;
  background-color: #fff2c8;
}
.santa:before {
  height: 130px;
}
.santa:after {
  height: 40px;
  bottom: -15px;
}
.hand-l {
  background-color: #e84701;
  height: 90px;
  width: 105px;
  position: absolute;
  right: -30px;
  top: 20px;
  border-radius: 0 80px 0 0;
}
.hand-l:before {
  margin: auto;
  width: 35px;
  height: 15px;
  background-color: #ffffff;
  top: 85px;
  left: 71px;
}
.hand-l:after {
  height: 15px;
  width: 30px;
  background-color: #fad2af;
  left: 74px;
  top: 101px;
  border-radius: 0 0 30px 30px;
}
.hand-r {
  height: 150px;
  width: 180px;
  border: 30px solid transparent;
  border-bottom: 40px solid #e84701;
  position: absolute;
  left: -100px;
  bottom: 150px;
  border-radius: 50%;
  animation: wave 1.5s infinite;
  transform-origin: right;
}
@keyframes wave {
  50% {
    transform: rotate(15deg);
  }
}
.hand-r:before {
  width: 35px;
  height: 15px;
  background-color: #ffffff;
  transform: rotate(-50deg);
  top: 68px;
  left: -22px;
}
.hand-r:after {
  width: 30px;
  height: 15px;
  background-color: #fad2af;
  transform: rotate(-50deg);
  left: -31px;
  top: 58px;
  border-radius: 15px 15px 0 0;
}
.face {
  position: absolute;
  margin: auto;
  height: 180px;
  width: 180px;
  background-color: #fad2af;
  border: 25px solid #f2e6da;
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: 140px;
}
.beard {
  position: absolute;
  height: 90px;
  width: 180px;
  background-color: #ffffff;
  border-radius: 0 0 90px 90px;
  right: -25px;
  bottom: -25px;
}
.beard:before {
  width: 55px;
  height: 25px;
  background-color: #f2e6da;
  border-radius: 20px 0;
  left: 34px;
}
.beard:after {
  height: 25px;
  width: 55px;
  background-color: #f2e6da;
  border-radius: 0 20px;
  right: 34px;
}
.eyes {
  height: 12px;
  width: 12px;
  background-color: #0078ca;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
  box-shadow: 38px 0 #0078ca, 19px 20px #f69697;
}
.eyes:before {
  height: 12px;
  width: 25px;
  background-color: #ffffff;
  border-radius: 10px 0;
  left: -10px;
  bottom: 20px;
}
.eyes:after {
  height: 12px;
  width: 25px;
  background-color: #ffffff;
  border-radius: 0 10px;
  left: 32px;
  bottom: 20px;
}
.hat {
  position: absolute;
  height: 60px;
  width: 120px;
  background-color: #e84701;
  top: -98px;
  left: 85px;
  border-radius: 0 0 60px 60px;
}
.hat:before {
  height: 40px;
  width: 40px;
  background-color: #ffffff;
  left: 100px;
  top: -15px;
  border-radius: 50%;
}
.belt {
  position: absolute;
  width: 100%;
  height: 30px;
  background-color: #000000;
  top: 100px;
}
.belt:before {
  height: 100%;
  width: 40px;
  border: 7px solid #ffdc2e;
  margin: auto;
  left: 0;
  right: 0;
}
.belt:after {
  height: 5px;
  width: 15px;
  background-color: #ffdc2e;
  left: 100px;
  top: 12px;
}
.shoe {
  height: 20px;
  width: 20px;
  background-color: #000000;
  position: absolute;
  top: 220px;
  left: 60px;
  border-radius: 20px 0 0 0;
}
.shoe:before {
  height: 20px;
  width: 20px;
  background-color: #000000;
  top: 0;
  left: 60px;
  border-radius: 0 20px 0 0;
}

We shape the elements into different shapes and place them together to create CSS art. Along with the elements we also make use of the pseudo-elements.

Once the art this ready all that is left to do is add some animation to the Santa’s hand. We do that by using keyframes that rotate Santa’s hand by some degrees at every 50% of the keyframes.

And well that’s pretty much it. With only little simple steps we have created a cute Santa animation. Now go ahead customize your Santa or Add some wishes.

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of Santa Animation directly on your computer.

Final Words

In this way, we can created the santa animation using html & css. You can also get this code on our github account.

Santa Animation With HTML & CSS

Published on 25-Dec-2021 20:44:18

You may also like this!