0

我目前有一个球形，但是，我正在想办法在我的网站上将它旋转成一个圆圈，这是我当前的代码：

<style>
  b.ball {
      display: block;
      width: 200px;
      height: 200px;
      margin: 30px auto 0;
      background-color: #3b4ba3;
      border-radius: 50%;
      box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
      background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
      background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);  
      background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
      background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
    }
<style>
<b class="ball"></b>

上面的代码在页面上放置了一个形状。

我将如何旋转这个球体使其旋转？不是围绕整个页面，而是在它自己的区域中，而不是整个页面。我已经用谷歌搜索了它，但我还没有任何东西可以特别解决我所见过的这个问题。

4

1 回答 1

1

您可以使用 css 动画：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

为变换设置动画：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

只需添加：

.ball {
    animation: spin 3s linear infinite;
}

@keyframes spin {

      from {

          transform:rotate(0deg);

      }

      to {

          transform:rotate(360deg);

      }
}

不过，您需要使用前缀，我在演示中包含了这些前缀：http: //jsfiddle.net/99bds/

于 2013-10-17T20:09:42.107 回答