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.
The Santa animation belongs to the Christmas special series of CSS tutorials. I have grouped these tutorials into a playlist on my youtube channel. You can check out the whole playlist here.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. So if you prefer to code along to a video tutorial you can check it out here down below. Also, I post fun and exciting tutorials on my youtube channel regularly. So do subscribe to my youtube channel to watch those 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.
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.
*,
*: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;
}
Â
If you have any issues while creating this project you can download the source code by clicking on the download button below. Also don’t forget to drop your queries, suggestions and feedback into the comments below.
See you in the next tutorial. Happy Coding!
