Happy Independence day pure CSS indian flag background animation





























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;
                }
}






 

Post a Comment

0 Comments