Create Animated India flag in HTML and CSS

Design a beautiful animated India Flag in HTML and CSS.

index.html

<pre class="highlight html">```  
<span class="cp"></span>  
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>  
<span class="nt"><head></span>  
    <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>  
    <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">></span>  
    <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span>  
    <span class="nt"><title></span>India Flag<span class="nt"></title></span>  
    <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span> <span class="nt">></span>  
<span class="nt"></head></span>  
<span class="nt"><body></span>  
    <span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">></span>  
        <span class="nt"><div</span> <span class="na">class=</span><span class="s">"flag-stand"</span><span class="nt">></div></span>  
        <span class="nt"><ul></span>  
            <span class="nt"><li</span> <span class="na">class=</span><span class="s">"orange"</span><span class="nt">></li></span>  
            <span class="nt"><li</span> <span class="na">class=</span><span class="s">"white"</span><span class="nt">></span>  
                <span class="nt"><div</span> <span class="na">class=</span><span class="s">"ashoka-chakra-div"</span><span class="nt">></span>  
                    <span class="nt"><img</span> <span class="na">src=</span><span class="s">"ashoka-chakra.svg"</span> <span class="na">alt=</span><span class="s">"ashoka-chakra"</span> <span class="na">class=</span><span class="s">"ashoka-chakra"</span><span class="nt">></span>  
                <span class="nt"></div></span>  
            <span class="nt"></li></span>  
            <span class="nt"><li</span> <span class="na">class=</span><span class="s">"green"</span><span class="nt">></li></span>  
        <span class="nt"></ul></span>  
    <span class="nt"></div></span>  
<span class="nt"></body></span>  
<span class="nt"></html></span>




style.css

```  
body{  
    background-image: url(https://images.wallpaperscraft.com/image/single/bench_sky_clouds_113412_1280x720.jpg);  
    background-size: cover;  
}  
.main-content{  
    position: absolute;  
    bottom: 9.2%;  
    left: 45%;  
}  
.flag-stand{  
    width: 10px;  
    height: 350px;  
    background: #587a0a;  
    float: left;  
}  
ul{  
    list-style: none;  
    margin: 0;  
    float: left;  
    padding: 0;  
}  
li{  
    width: 180px;  
    height: 35px;  
    animation-name: stretch;  
    animation-duration: 1.5s;  
    animation-timing-function: ease-out;  
    animation-direction: alternate;  
    animation-iteration-count: infinite;  
}  
@keyframes stretch {  
    0% {  
      transition: all 0.75s ease-in-out;  
      width: 185px;  
    }  
    50% {  
      transition: all 0.75s ease-in-out;  
      width: 195px;  
    }

    100% {  
      transition: all 0.75s ease-in-out;  
      width: 205px;  
    }  
  }  
.orange{  
    background: #f96232;  
}  
.white{  
    background: #fff;  
}  
.green{  
    background: #006000;  
}  
.ashoka-chakra-div{  
    width: 35px;  
    height: 35px;  
    margin: 0 auto;  
    animation: rotate 2s linear infinite;  
}  
.ashoka-chakra{  
    height: 100%;  
    animation-delay: 9s;  
}  
@keyframes rotate{  
    from{  
        transform: rotate(0deg);  
    }  
    to{  
        transform: rotate(360deg);  
    }  
}

```  
```



Blog:- [Beginner Developer](https://beginners-developer.blogspot.com)

Comments (0)

loading comments

Tails

Blocks

Wave

Pines

Auth

Designer comingsoon

DevBlog comingsoon

Static

SaaS Adventure

Create Animated India flag in HTML and CSS

Create Animated India flag in HTML and CSS

Comments (0)