1

全て

jqueryとcss3キーフレームを使用してdivや画像などの要素をポイントまたはマウスの周りに移動または丸めようとすると問題が発生し、時間を遅らせるのではなく、丸を保ちます。

解決策はありますか？を見せて下さい。前もって感謝します ！

4

2 に答える 2

4

あなたの明確なコメントから：

位置を指定して、画像または要素を丸くする方法

CSS3 アニメーション

ポイントを中心に要素をスムーズに回転させて永遠に継続するアニメーションを作成するには、次の CSS3 キーフレーム/アニメーションおよび 2D 変換プロパティを使用できます。

  • animationタイミングと使用するキーフレームを指定します。
  • animation-timing-function滑らかなアニメーションが必要であることを指定します ( linear)。
  • @keyframes要素をアニメーション化する方法を正確に指定します。
  • transform-origindivの中心以外のポイントを中心に回転します（オフセット）。
  • transform要素を回転の中心 (軌道半径) から外に移動します。
  • rotate(<angle>);キーフレームで回転することを指定します。

CSS3 アニメーション機能が広くサポートされるまでの間、おそらくこれらを複製し、それぞれに-webkit-,のプレフィックスを付ける必要があります。-moz--ms-

CSS/jQueryでの位置指定

従来の CSS を使用して、任意の点を中心に HTML 要素を回転させることができます。

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

アニメーションを常にマウス カーソルの中央に配置したい場合は、jQuery を使用mousemoveしてドキュメントのイベントを処理し、要素の CSS の プロパティleftとプロパティを設定する必要があります。top

何かのようなもの：

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

ドキュメント

コードサンプル

これを独自に構築するために必要な関数と参照を調査するために、コード サンプルを構築しました。他の回答で既にコードサンプルが提供されているので、先に進んで投稿します。

これらがどのように機能するかを学ぶことができるように、これを自分で構築することを強くお勧めします:)

ブラウザのサポート

CSS3 アニメーション サポート マトリックスを含むこのページと、CSS3 2D 変換サポート マトリックスを含むこのページを参照してください。

要点は次のとおりです。

  • IE 10.0 以降でのみ動作します。IE9では動かない
  • FirefoxまたはChromeのほぼすべてのバージョンで動作します
  • Safari 4.0 以降で動作するはずです。
  • おそらく Opera では動作しません (動作-o-させるには Tranform タグが必要で、アニメーションのサポートはまだありません)。
于 2011-12-23T05:00:30.143 に答える
1

これはあなたが求めていたものだと思います: http://jsfiddle.net/BZSQd/

ご不明な点がございましたら、お気軽にお問い合わせください:)

@-webkit-keyframes spin {
    from { -webkit-transform: rotateZ(0); }
    to   { -webkit-transform: rotateZ(-360deg); }
}

div {
    border   : 1px solid #000;
    width    : 1px;
    height   : 1px;
    position : absolute;
    -webkit-animation        : spin 8s infinite linear;
    -webkit-transform-origin : 50px 50px;
}
于 2011-12-23T05:00:44.903 に答える