Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a sleepy cloud animation. To create this animation we need HTML and CSS. We won’t be using any images or external libraries to create this animation.
This is a fun tutorial that will help you explore and experiment with new CSS properties. So I would recommend beginners to go ahead and give this tutorial a try.
If you would like more tutorials to improve your CSS skills you can check this playlist here. This playlist consists of a bunch of CSS animation tutorials.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out this video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding let us create the project folder structure. We create a project folder called – ‘Sleepy Cloud Animation’. Inside this folder, we have two files – index.html and style.css.The first file is the HTML document while the second file is the stylesheet.
HTML:
The HTML code creates the elements required for the structure of our illustration. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sleepy Cloud Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="moon"></div>
<div class="cloud">
<div class="blush"></div>
<div class="eye-l"></div>
<div class="eye-r"></div>
<div class="mouth"></div>
</div>
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
<div class="star star-6"></div>
</div>
</body>
</html>
CSS:
Next, we shape and style these elements using CSS. Also, we use CSS to animate these shapes. Next copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #394276;
height: 31.25em;
width: 31.25em;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.cloud {
background-color: #f5f5f5;
height: 6.25em;
width: 20.62em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 18.75em;
border-radius: 6.25em;
}
.cloud:before {
position: absolute;
content: "";
height: 10.62em;
width: 10.62em;
background-color: #f5f5f5;
border-radius: 50%;
bottom: 1.87em;
left: 2.5em;
}
.cloud:after {
position: absolute;
content: "";
height: 6.25em;
width: 6.25em;
background-color: #f5f5f5;
border-radius: 50%;
bottom: 3.75em;
right: 3.12em;
z-index: -1;
}
.moon {
background-color: #787470;
height: 9.37em;
width: 9.37em;
border-radius: 50%;
position: absolute;
right: 5em;
top: 11.25em;
overflow: hidden;
z-index: -2;
animation: spin-moon 5s infinite linear;
}
@keyframes spin-moon {
100% {
transform: rotate(360deg);
}
}
.moon:before {
position: absolute;
content: "";
height: 1.87em;
width: 1.87em;
background-color: #565350;
border-radius: 50%;
top: 1.87em;
box-shadow: 5.62em 3.12em 0 0.75em #565350, 2.18em 4.68em 0 -0.3em #565350,
6.25em -1.87em 0 -0.18em #565350, 3.43em 0.3em 0 -0.5em #565350;
}
.blush {
height: 2.62em;
width: 2.62em;
background-color: #c9c9c9;
border-radius: 50%;
position: absolute;
left: 5em;
box-shadow: 6.87em 0 #c9c9c9;
}
.eye-l,
.eye-r {
position: absolute;
height: 1.25em;
width: 2.12em;
background-color: #363636;
border-radius: 0 0 0.93em 0.93em;
}
.eye-l {
left: 6.87em;
}
.eye-r {
left: 11.25em;
}
.eye-l:after,
.eye-r:after {
position: absolute;
content: "";
background-color: #f5f5f5;
height: 0.81em;
width: 1.25em;
border-radius: 0 0 0.93em 0.93em;
left: 0.43em;
}
.mouth {
height: 1.25em;
width: 1.25em;
background-color: #363636;
border-radius: 50%;
position: absolute;
left: 9.68em;
top: 1.56em;
animation: snoore 3s infinite;
}
@keyframes snoore {
50% {
transform: scale(1.3);
}
}
.star {
position: absolute;
height: 0.31em;
width: 0.31em;
background-color: #f0d815;
border-radius: 50%;
}
.star:before {
position: absolute;
content: "";
background-color: rgba(240, 216, 21, 0.4);
height: 0.31em;
width: 0.31em;
border-radius: 50%;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
50% {
transform: scale(2);
}
}
.star-1 {
left: 4.37em;
top: 6.25em;
}
.star-2 {
left: 13.12em;
top: 28.12em;
}
.star-3 {
left: 8.75em;
top: 10em;
}
.star-4 {
left: 16.25em;
top: 1.87em;
}
.star-5 {
left: 26.25em;
top: 21.87em;
}
.star-6 {
left: 28.75em;
top: 11.87em;
}
@media screen and (max-width: 500px) {
.container {
font-size: 12px;
}
}
That’s it for this tutorial. Your sleepy cloud animation is now ready. You can now go ahead and customize this animation as per your liking. You can change the colours, animation durations and much more.
If you face any issues while creating this code you can download the source code by clicking on the ‘Download Button’ below. Also, I would love to hear from you guys so if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
