| CSS | |
| #org{ | |
| display:block; | |
| width:220px; | |
| height:50px; | |
| background-color:rgba(255, 71, 0, 0.84); | |
| box-shadow:#FF3908 0px 100px 1500px; | |
| } | |
| #white{ | |
| display:block; | |
| width:220px; | |
| height:50px; | |
| background-color:rgba(255, 255, 255, 0.84); | |
| box-shadow:#FFFFFF 0px 100px 1500px; | |
| } | |
| #blue{ | |
| display:block; | |
| width:20%; | |
| height:50px; | |
| margin:0 0 0 40%; | |
| box-shadow:#084DFF 0px 100px 1500px; | |
| border-radius:50%; | |
| } | |
| #gree{ | |
| display:block; | |
| width:220px; | |
| height:50px; | |
| background-color:rgba(51, 148, 5, 0.84); | |
| box-shadow:#57DB19 0px 100px 1500px; | |
| } | |
| #stick{ | |
| display:block; | |
| width:5px; | |
| height:300px; | |
| position:fixed; | |
| background-color:rgba(51, 148, 5, 0.84); | |
| box-shadow:#45EE1B 0px 100px 1500px; | |
| } | |
| HTML | |
| <body> | |
| <div id="flag"> | |
| <div id="stick"> Happy Independence | |
| </div> | |
| <div id="org"></div> | |
| <div id="white"><img id="blue" src="http://upload.wikimedia.org/wikipedia/commons/e/e4/Spinning_Ashoka_Chakra.gif" /> | |
| </div> | |
| <div id="gree">Day</div> | |
| </div> | |
jQuery | |
| $(document).ready(function(){ | |
| setInterval(fun,2000); | |
| }); | |
| function fun(){ | |
| $("#org").effect("pulsate",5000); | |
| $("#white").toggle("pulsate",3000); | |
| $("#gree").effect("pulsate",2000); | |
| $("#stick").effect("pulsate",5000); | |
| } | |
| Happy Independence Day to every one. You can Check the Output Here | |
Want to wish Happy independence day to every one? What will you do. Share image , write text or else. But i have a programmer style of wishing. What about wishing by creating your own animated flag. Just check out the below code to do it.

Join the conversation! Your thoughts help the community grow.