Gold Rate Today Animation

animation-widgets   

Best code editor with Live preview Online - html editor with live preview online

HTML

Background

<div class="text-anim"> <div id="container-anim">Gold rate Today<div id="flip"> <div><span>1Gram - 22K</span> <div>5565</div> </div> <div><span>10 Gram - 22K</span> <div>55,650</div> </div> <div><span>1Gram - 24K</span> <div>6071</div> </div> <div><span>10Gram - 24K</span> <div>60,710</div> </div> </div> <br> Siver Rate Today <div id="flip"> <div><span>1Gram - </span> <div>72.90</div> </div> <div><span>10Gram - </span> <div>729</div> </div> <div><span>1KG - </span> <div>72,900</div> </div></div></div> </div>

CSS

#container-anim { color:#260119; text-align:center; text-transform: uppercase; font-size:36px; margin-top:50px; font-family: 'Fredericka the Great', cursive; width:100%; bottom:45%; display:block;} #flip { height:50px; overflow:hidden;} #flip > div > div { color:#fff; padding:4px 12px; height:50px; margin-bottom:38px; display:inline-block;} #flip div:first-child { animation: show 9s linear infinite;} #flip div div {background:#8C1864;} #flip div:first-child div {background:#F2911B;} #flip div:last-child div {background:#F2911B;} @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} }

JavaScript

Width

Height

Align

Devices

Choose Background Image

DROP IMAGE OR CLICK ME