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

于 2013-10-17T20:09:42.107 に答える