HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>Happy
Independence Day pure css animation</title>
</head>
<body>
<span
class="text"> Happy Independence Day</span>
<div
class="flag">
<div
class="flagU"></div>
<div
class="flagM">
<span
class="ashok_circle1"></span>
<span
class="ashok_circle2"></span>
<span
class="ashok_circle3"></span>
<span
class="ashok_circle4"></span>
<span
class="ashok_circle5"></span>
<span
class="ashok_circle6"></span>
<span
class="ashok_circle7"></span>
<span
class="ashok_circle8"></span>
<span
class="ashok_circle9"></span>
<span
class="ashok_circle10"></span>
<span
class="ashok_circle11"></span>
<span
class="ashok_circle12"></span>
<!--
12 span for 21 line for ashok circle-->
<span
class="ashok_circle"></span>
</div>
<div
class="flagD"></div>
</div>
</body>
</html>
|
CSS code:-
Body
{
background:#555;
transition: 4s;
animation:
animate 5s infinite;
}
.flag
{
display: block;
margin-left: 8%;
margin-top: 5%;
border-left: 4px
solid black;
height: 500px;
}
.flagU
{
background:#ff542c;
height: 40px;
width: 180px;
}
.flagM
{
background:white;
height: 40px;
width: 180px;
justify-content:
center;
display: flex;
align-items:
center;
}
.flagD
{
background:green;
height: 40px;
width: 180px;
}
.ashok_circle1
{
position:
absolute;
height: 20px;
transform:rotate(30deg);
border:.5px
solid black;
}
.ashok_circle2
{
position:
absolute;
height: 20px;
transform:rotate(60deg);
border:.5px
solid black;
}
.ashok_circle3
{
position:
absolute;
height: 20px;
transform:rotate(90deg);
border:.5px
solid black;
}
.ashok_circle4
{
position:
absolute;
height: 20px;
transform:rotate(120deg);
border:.5px
solid black;
}
.ashok_circle5
{
position:
absolute;
height: 20px;
transform:rotate(150deg);
border:.5px
solid black;
}
.ashok_circle6
{
position:
absolute;
height: 20px;
transform:rotate(180deg);
border:.5px
solid black;
}
.ashok_circle7
{
position:
absolute;
height: 20px;
transform:rotate(210deg);
border:.5px
solid black;
}
.ashok_circle8
{
position:
absolute;
height: 20px;
transform:rotate(240deg);
border:.5px
solid black;
}
.ashok_circle9
{
position:
absolute;
height: 20px;
transform:rotate(270deg);
border:.5px
solid black;
}
.ashok_circle10
{
position:
absolute;
height: 20px;
transform:rotate(300deg);
border:.5px
solid black;
}
.ashok_circle11
{
position:
absolute;
height: 20px;
transform:rotate(330deg);
border:.5px
solid black;
}
.ashok_circle12
{
position:
absolute;
height: 20px;
transform:rotate(360deg);
border:.5px
solid black;
}
.ashok_circle
{
height: 21px;
width: 21px;
border-radius:
50%;
align-items:
center;
justify-content:
center;
border:1px solid
black;
display: flex;
}
.text
{
background:linear-gradient(red,white,green);
margin-left:
27%;
margin-top: 25%;
font-family:
Colonna MT;
font-size: 70px;
color: blue;
position:
absolute;
}
@keyframes animate
{
20%
{
background:#d47874;
}
50%
{
background:#474a74;
}
80%
{
background:#0fdfec;
}
}
|
0 Comments