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