Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a CSS-based ‘Bee Animation’. To build this project we would need HTML and CSS. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘CSS Bee Animation’. Inside this folder, we have two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
We start by creating the container div. The container div has div elements for the wings and the bee. The bee div has another shine div which we will need for creating a small shiny curve.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Bee Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wings"></div>
<div class="bee">
<div class="shine"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we style our bee using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
Our first focus would be to create the bee. We use a ‘linear-gradient’ background to display stripes on the bee’s body. Our bee needs an eye and a tail for which we use the ‘before’ and ‘after’ pseudo-elements. Each of these has a ‘border-radius’ to create a curved body, tail, and circular eye.
Then for the wings, we create two circular shapes on the wings div, and using the ‘before’ pseudo-element, after this, we add a shiny curve on one of the wings using the ‘after’ pseudo-element. Then we add a curved shine on the bee’s body and create legs for the bee. Finally, we provide a floating animation to the bee by animating the ‘translateY’ property.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #952068;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: fly 4s infinite;
}
@keyframes fly {
50% {
transform: translateY(-3.12em);
}
}
.bee {
height: 7.5em;
width: 12.5em;
background: linear-gradient(
to right,
#f4c13d 30%,
#0d323e 30%,
#0d323e 45%,
#f4c13d 45%,
#f4c13d 55%,
#0d323e 55%,
#0d323e 70%,
#f4c13d 70%,
#f4c13d 80%,
#0d323e 80%
);
border-radius: 5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: inset 0 -1.56em rgba(0, 0, 0, 0.15);
}
.bee:before {
position: absolute;
content: "";
height: 0.87em;
width: 0.87em;
background-color: #0d323e;
border-radius: 50%;
top: 3.43em;
left: 1.25em;
}
.bee:after {
position: absolute;
content: "";
height: 0.31em;
width: 1.87em;
background-color: #0d323e;
border-radius: 0.31em;
top: 3.43em;
left: 11.87em;
}
.wings {
position: absolute;
height: 5em;
width: 5em;
background-color: #ea92b9;
border-radius: 5em 5em 0 5em;
top: 7.5em;
left: 11.25em;
}
.wings:before {
position: absolute;
content: "";
height: 5em;
width: 5em;
background-color: #ea92b9;
border-radius: 5em 5em 5em 0;
left: 4.68em;
}
.wings:after {
height: 3.75em;
width: 3.75em;
position: absolute;
content: "";
box-shadow: -0.62em -0.62em #f2c7c9;
border-radius: 50%;
top: 1.12em;
left: 1.12em;
}
.shine {
position: absolute;
height: 1.25em;
width: 7.5em;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 1.25em;
top: 1.25em;
left: 3.12em;
}
.shine:before {
position: absolute;
content: "";
height: 3.12em;
width: 0.93em;
background-color: #0b2b35;
border-radius: 0.93em;
transform: rotate(-30deg);
top: 4.68em;
left: 1.87em;
box-shadow: 2.5em 1.25em #0b2b35;
}
@media screen and (min-width: 700px) {
.container {
font-size: 1.2em;
}
}
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
