Question

我需要一个圆形路径上的选取框，它实际上是一个字段集。我希望图像“G”以圆形路径移动。

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

Answer 1

我认为marquee标签很古老而且从不官方，虽然浏览器可能仍然支持它。我不认为它可以做你想要的。但也许你可以看看CSS过渡：

/* Show and size the container, so you 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%;
}

/* The letter and the container rotate at the 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); } }


/* But the 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>

在html和css的圆形路径上创建一个选取框？

1 个答案: