Question

我目前有一个球体形状但是，我正试图想办法如何在我的网站上围成一圈旋转这是我当前的代码：

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

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

如何旋转此球体使其旋转？不是在整个页面，而是在它自己的区域，而不是整个页面。我用谷歌搜索了它，我没有特别解决这个问题，我已经看过了。

Answer 1

您可以使用css-animations：

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/

在网页上旋转/旋转球体

1 个答案: