Flag using css
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #161616;
}
.container{
height: 70vh;
width: 70%;
margin: 200px auto 150px auto;
position: relative;
}
.stick{
width: 1em;
height: 75vh;
background: #7f4b02;
position: absolute;
top: -2em;
left: 0;
z-index: 3;
border-radius: 3px 3px 0 0;
box-shadow: 0px -5px 10px rgba(255,255,255,0.2),
0px -10px 10px rgba(255,255,255,0.1),
5px 0px 10px rgba(0,0,0,0.7),
7px 0px 10px rgba(0,0,0,0.4);
}
.flag{
width: 0;
height: 10em;
animation: flag 1s linear forwards;
}
.red{
background: orangered;
box-shadow: 0px -5px 10px rgba(255,255,255,0.2),
0px -10px 10px rgba(255,255,255,0.1),
0px -20px 10px rgba(255,255,255,0.05),
5px 0px 10px rgba(0,0,0,0.7),
10px 0px 10px rgba(0,0,0,0.4);
}
.white{
background: #fff;
box-shadow: 5px 0px 10px rgba(0,0,0,0.7),
10px 0px 10px rgba(0,0,0,0.4);
animation-delay: 1s;
}
.green{
background: green;
box-shadow: 5px 5px 10px rgba(0,0,0,0.7),
10px 10px 10px rgba(0,0,0,0.45),
10px 20px 10px rgba(0,0,0,0.25);
animation-delay: 2s;
}
.ashoke{
width: 10em;
height: 10em;
border-radius: 50%;
border: 0.2em solid blue;
margin: auto;
position: relative;
overflow: hidden;
animation: rotation 1s linear infinite;
}
.line1{
width: 0.2em;
height: 10em;
background: blue;
position: absolute;
left: 50%;
top: 0;
}
.line2{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
}
.line3{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(40deg);
}
.line4{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(-40deg);
}
.line5{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(65deg);
}
.line6{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(-65deg);
}
.line7{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(20deg);
}
.line8{
width: 10em;
height: 0.2em;
background: blue;
position: absolute;
top: 50%;
left: 0;
transform: rotate(-20deg);
}
.line9{
width: 2em;
height: 2em;
background: blue;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes rotation {
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes flag {
from{
width: 0;
}
to {
width: 100%;
}
}
h2 {
color: crimson;
text-shadow: 1px 1px 1px white;
text-align: center;
font-variant: small-caps;
font-size: 3em;
letter-spacing:0.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="stick"></div>
<div class="flag red"></div>
<div class="flag white">
<div class="ashoke">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="line7"></div>
<div class="line8"></div>
<div class="line9"></div>
</div>
</div>
<div class="flag green"></div>
</div>
<h2>Happy Republic Day</h2>
</body>
</html>
