How to create Indian Flag with Animation | HTML & CSS Project - Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made Indian Flag with animation using HTML and CSS Only!😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this Indian FLag with animation in HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for the flag and span for the bars of the flag.
<div class="flag">
<div class="saffron flag-item"></div>
<div class="white flag-item">
<div class="circle">
<span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span>
</div>
</div>
<div class="green flag-item"></div>
<div class="flag-wave"></div>
</div>
<p class="info">
<a href="http://coderexample.com/animated-indian-flag-in-pure-css-no-image-no-js/" target="_blank"> See article @coderexample.com</a>
</p>
After the HTML we will design the divs and span.
CSS🎈( step - 2)
.flag {
margin:30px auto;
position: relative;
width:250px;
height:150px;
-webkit-perspective: 1000;
-webkit-transform-style: preserve3d;
-webkit-transform-origin: 0 250px;
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
-webkit-animation-name: wave;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
perspective: 1000;
transform-style: preserve3d;
transform-origin: 0 250px;
transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
animation-name: wave;
animation-duration: 8s;
animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.flag:before {
position: absolute;
content: "";
height: 400px;
left: -1px;
top: 1px;
width: 8px;
border-right: 1px solid #FFF;
border-radius: 3px;
background-color: #422;
box-shadow: -3px 3px 8px 0px rgba(0, 0, 0, 0.4);
}
.white {
background: #FFF;
}
.green {
background: #006400;
}
.saffron {
background: #F93;
}
.flag-item {
height:33.33%;
box-sizing:border-box;
}
.flag-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: -webkit-gradient(linear, 0 -25%, 100% top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(0, 0, 0, 0.04)), color-stop(40%, rgba(255, 255, 255, 0.2)), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(65%, rgba(255, 255, 255, 0.2)), color-stop(80%, rgba(0, 0, 0, 0.05)), color-stop(100%, rgba(255, 255, 255, 0)));
background-size: 200%;
-webkit-animation-name: air;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
-webkit-animation-iteration-count: infinite;
}
.circle {
width:47px;
height:47px;
border:2px solid #000080;
border-radius:50%;
position:absolute;
left:40%;
-webkit-animation: circle 5s infinite;
animation: circle 10s linear 2s infinite;
}
.circle:after {
content:"";
width:3px;
height:3px;
border-radius:50%;
background:#00080;
position:absolute;
top:45%;
left:45%;
}
.bar {
position: absolute;
display:inline-block;
height:47px;
width:2px;
background:#000080;
left:47%;
}
.bar:nth-child(1) {
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.bar:nth-child(2) {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.bar:nth-child(3) {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar:nth-child(4) {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.bar:nth-child(5) {
-ms-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
transform: rotate(75deg);
}
.bar:nth-child(6) {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar:nth-child(7) {
-ms-transform: rotate(105deg);
-webkit-transform: rotate(105deg);
transform: rotate(105deg);
}
.bar:nth-child(8) {
-ms-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.bar:nth-child(9) {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.bar:nth-child(10) {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.bar:nth-child(11) {
-ms-transform: rotate(165deg);
-webkit-transform: rotate(165deg);
transform: rotate(165deg);
}
@-webkit-keyframes circle {
from {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes wave {
0% {
box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
}
20% {
box-shadow: 4px 5px 15px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
}
40% {
box-shadow: 4px 5px 20px 0 rgba(0, 0, 0, 0.4);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
}
60% {
box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
}
80% {
box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.3);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(16deg);
}
100% {
box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
}
}
@-webkit-keyframes air {
0% {
background-position: -200% 0px;
}
30% {
background-position: -60% 5px;
}
70% {
background-position: 70% -5px;
}
100% {
background-position: 200% 0px;
}
}
.info {
text-align:center;
margin-top:320px;
}
.info a {
text-decoration:none;
font-size:20px;
color:#f4645f;
font-weight:700;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
the coder of this project:
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
Great article thanks
ReplyDelete