Video Tutorial:
I have a video version of this tutorial on my youtube channel. So if you like to code along to the video tutorial, you can check out the video tutorial here down below. Also, I have another tricolour animation tutorial which you can check out here.
Project Folder Structure:
Let us create the project folder structure before we start coding. In order to do so, we create a project folder called – Happy Republic Day. Inside this folder, we have three files. These files are index.html, style.css and an image file. The index.html file is our HTML document while the style.css is our stylesheet.
HTML:
We start with the HTML code. Firstly copy the code below and paste it into your HTML document.
The HTML code consists of three divs’s. Each of them has a different class assigned to them. Following these div’s we have an image tag. We have used an Ashoka chakra PNG as the ‘src’ of the image tag. You can download this image along with the source code from down below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Happy Republic Day</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clr-orange"></div>
<div class="clr-white"></div>
<div class="clr-green"></div>
<img class="ashoka-chakra" src="ashoka chakra.png" />
</body>
</html>
Â
CSS:
Other Tutorials You Might Like:
- Toast Notification UI Design | HTML & CSS Tutorial
- Email Validation Using Javascript
- No Javascript Interactive Lamp
This completes our animation.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
}
.clr-orange,
.clr-white,
.clr-green {
height: 33.33vh;
width: 0;
position: absolute;
animation: grow 2s forwards;
}
.clr-orange {
background: linear-gradient(to bottom, #ff8011, #ffae4a);
top: 0;
left: 0;
}
.clr-white {
background: #ffffff;
top: 33.33vh;
right: 0;
}
.clr-green {
background: linear-gradient(to bottom, #75fc3b, #46ad1b);
bottom: 0;
left: 0;
}
@keyframes grow {
100% {
width: 100vw;
}
}
.ashoka-chakra {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 0;
animation: spin 3s 2s linear infinite;
}
@keyframes spin {
0% {
width: 30vmin;
}
100% {
width: 30vmin;
transform: translate(-50%, -50%) rotate(360deg);
}
}
Our animation is now ready. If you have any issues while creating this code download the source code by clicking on the download button below. Also, don’t forget to drop your queries suggestions and feedback in the comments below.
thanks