Create a marquee on a circular path in html and css? -
i need marquee on circular path fieldset. want image "g" move in circular path.
<html> <style type="text/css"> #circle { width:600px ; height:600px ; border-radius:50%; text-align:centre; margin-left:25%; margin-right:25%; } #circle > legend { margin:0px auto; } #appimg1 { width:100px ; height:100px ; border-radius:50%; } </style> <fieldset id="circle"> <marquee behaviour="scroll" id="circle1"> <legend id="circle2"><img src="games.png" id="appimg1"></legend> </marquee> </fieldset>
i think marquee tag ancient , never official, although browsers may still support it. don't think can want. maybe can have @ css transitions:
/* show , size container, can see what's going on. */ .container { position: absolute; top: 200px; left: 200px; border: 1px dashed #999; display: inline-block; width: 200px; padding: 5px; font-size: 150%; } /* letter , container rotate @ same speed */ .container, .letter { -webkit-animation:spin 20s linear infinite; -moz-animation:spin 20s linear infinite; animation:spin 20s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* letter rotates in opposite direction */ .letter { -webkit-animation-direction: reverse; /* chrome, safari, opera */ animation-direction: reverse; }
<div class="container"> <span class="letter">g</span> </div>
Comments
Post a Comment