Animated Indian Flag Using HTML & CSS
Hello Viewers
Today we will learn how to create or design Animated INDIAN Flag by using HTML and CSS.
If you want to learn step by step in Hindi, So you can move to my YouTube's Channel (IT in Hindi).
In this post we are providing the full source code of Analog Clock.
You can copy and use the code because it is non copyright.
SOURCE CODE:
HTML CODE:
Step1- Copy and paste the HTML code mentioned below and save the file as "Republicday.html".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Indian flag using CSS</title>
<meta name="description" content="Animated Indian flag using CSS." />
<meta name="author" content="Devnote team" />
<!-- indian flag css -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>Happy Republic Day</h1>
<h2>IT in Hindi</h2>
</div>
<div class="main">
<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>
</div>
</div>
</body>
</html>
--------------------------------------END-----------------------------------------------
CSS CODE :
Step2- Copy and paste the CSS code below and save the file as "style.css".
.main {
margin: 25px auto;
padding:20px;
max-width: 980px;
width:70%;
overflow: hidden;
border-radius:5px;
min-height: 500px;
}
.header{
text-align: center;
}
.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: -5px;
top: -3px;
width: 8px;
border-right: 1px solid #FFF;
border-radius: 3px;
background-color: #210909;
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;
}
}
How to run the source code :-
Step1- Copy and paste the HTML code mentioned below and save the file as "Republicday.html".
Step2- Copy and paste the CSS code below and save the file as "style.css".
Step3- Run "Republicday.html" file.
0 Comments