Hello developers friends, welcome to this new project today, today we have made a great project for you friends, you must know that Independence Day is about to come, which is a matter of great pride for Indians, so in this happiness we have made the tricolor of our country India, which we have made with the help of HTML CSS and JavaScript, which is a very amazing project
Independence Day Animation
body {
padding: 0;
margin: 0;
background-color: #000000;
overflow: hidden;
}
.container {
height: 700px;
width: 700px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
clip-path: url(#map-path);
}
svg {
height: 0;
width: 0;
}
.color-orange,
.color-green {
position: absolute;
width: 100%;
height: 39%;
left: 0;
animation: slide-right 6s;
}
.color-orange {
top: 0;
background: linear-gradient(#fec200, #ff8a00);
}
.color-green {
bottom: 0;
background: linear-gradient(#4cc701, #0a8d03);
}
@keyframes slide-right {
0% {
left: -100%;
}
}
.color-white {
position: absolute;
width: 100%;
height: 22%;
top: 39%;
background-color: #ffffff;
right: 0;
animation: slide-left 6s;
}
@keyframes slide-left {
0% {
right: -100%;
}
}
#ashoka-chakra {
height: 120px;
width: 120px;
position: absolute;
margin: auto;
left: -150px;
right: 0;
top: 0;
bottom: 0;
animation: spin 3s 4.2s forwards;
transform: scale(0);
}
@keyframes spin {
80% {
transform: scale(1.6) rotate(360deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
See the Pen independence day project using html css and javascript by Developergtm (@developergtm) on CodePen.