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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -