Question

我是CSS的新手，但仍然没有获得很多东西！使用仅 CSS动画我必须在轮盘赌上创建一个旋转动画。我必须创建一个球体，并作为背景使用轮盘img。我的问题是如何每10％的动画更改球体的位置，这样它就可以围绕轮盘进行整圈。 这是我用作背景的img： http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif

HTML：

<div id="roulette">
<figure class="circle"></figure>
</div>

CSS：

#roulette{
  background-image: url("american-roulette-wheel.gif");
  width:395px;
  height:400px;
  margin:0;
}
.circle {
  position:fixed;
  top:84px;
  left:190px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin:0;
  background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}

谢谢！

Answer 1

通过将球/圆形图像放置在容器div中并旋转该div，您可以创建围绕背景传播的球的错觉。您必须使用定位才能确保准确，旋转球和容器div可能会很酷。

<div id="roulette">
    <div class="circleContainer">
        <figure class="circle"></figure>
    </div>
</div>

#roulette{
  background-image: url(http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif);
  width:395px;
  height:400px;
  margin:0;
}
.circle {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin:0;
  background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}
.circleContainer{
    height: 250px;
    top: 80px;
    position: fixed;
    left: 190px;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

https://jsfiddle.net/2gat1m5y/1/

如何使用css更改球体的位置

1 个答案: