Hey everyone. Welcome to today’s tutorial. Today’s tutorial is going to be super easy and beginner-friendly animation. To create this art and animation we, need just HTML and CSS. No images, icons or javascript are needed at all.
These kinds of tutorials are a great way to practice and experiment with various CSS properties. They also help you learn how animation keyframes work. I have a playlist that comprises tutorials on CSS animations. You can check out that playlist here.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. So if you are interested in learning by coding along to the tutorial, check out the video down below.
Project Folder Structure:
Now before we start the actual coding let us first create the project folder structure. We create a project folder called bee animation. Inside this folder, we have two files – index.html and style.css. The first file is the HTML document and the second is the stylesheet.
HTML:
We start with the HTML section. Now copy the code provided below and paste it into your HTML document.
The HTML code consists of a div with the class name bee. Inside that, we have three div. These three divs have class names as – eye, antenna and mouth.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bee Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bee">
<div class="eye"></div>
<div class="antenna"></div>
<div class="mouth"></div>
</div>
</body>
</html>
Â
CSS:
Now that we have created the layout using HTML. Let us give these divs shape and style using CSS. To do so copy the code below and paste it into the stylesheet.
We start by removing paddings and margins from all the elements. We also set the background color of the body to #49befe.
Next, we set the dimensions for the bee. We use white color with some opacity to create a transparent effect.
After that, we use the before pseudo-element to create the bee’s body. We use the linear gradient to create the striped body of the bee. To give the bee a capsule kind of shape we use the border-radius property.
In the next step, we use the eye and ‘eye:before’ pseudo-element to create both eyes. Similarly, we use the antenna and its pseudo element to create the antennas.
Finally, we use the radial gradient to create the bee’s mouth and the little round tongue. And to add a final touch we use the before element to create the teeth. Now, all we have to do is add animation. For this, we add animation property to the bee class. The keyframes move the bee up by 150px every 50% of the keyframe.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #49befe;
}
.bee {
height: 100px;
width: 270px;
background-color: rgba(255, 255, 255, 0.4);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -150px;
border-radius: 50px;
animation: fly 4s infinite;
}
@keyframes fly {
50% {
transform: translateY(-150px);
}
}
.bee:before {
position: absolute;
content: "";
height: 200px;
width: 140px;
background: linear-gradient(
#ffec02 70%,
#202020 70%,
#202020 75%,
#ffec02 75%,
#ffec02 80%,
#202020 80%,
#202020 85%,
#ffec02 85%,
#ffec02 90%,
#202020 90%,
#202020 95%,
#ffec02 95%
);
border-radius: 70px;
left: 65px;
bottom: -45px;
}
.eye,
.eye:before {
position: absolute;
height: 13.5px;
width: 25px;
border: 7px solid #202020;
border-radius: 20px 20px 0 0;
bottom: 95px;
border-bottom: none;
}
.eye {
left: 98px;
}
.eye:before {
content: "";
bottom: 0;
left: 40px;
}
.antenna,
.antenna:before {
position: absolute;
height: 50px;
width: 8px;
background-color: #202020;
}
.antenna {
left: 164px;
bottom: 130px;
transform: rotate(25deg);
z-index: -1;
}
.antenna:before {
content: "";
right: 55px;
top: 25px;
transform: rotate(-50deg);
}
.antenna:after {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: #202020;
border-radius: 50%;
left: -6px;
bottom: 40px;
box-shadow: -72px 35px #202020;
}
.mouth {
position: absolute;
height: 40px;
width: 80px;
background: radial-gradient(circle at 50% 100%, #ff90a3 15px, #202020 16px);
top: 20px;
left: 93px;
border-radius: 0 0 40px 40px;
}
.mouth:before {
position: absolute;
content: "";
height: 10px;
width: 50px;
background-color: #ffffff;
left: 14px;
top: -0.5px;
}
That’s it. Our bee animation is now ready. If you have any issues creating this code you download the source code by clicking on the download code button below. In case of any queries, suggestions or feedbacks drop them in the comments below.
