5

divを使って無限シンボルアニメーションを作りたいです。これを実現するには、div でどのようなアニメーションを実行する必要がありますか。

ここに画像の説明を入力

前もって感謝します！

4

4 に答える 4

4

別のアプローチを試みました。まだCSS3アニメーションだけです。

軌道に沿って 2 回走る 2 つのボール。1 つは時計回り、もう 1 つは反時計回りです。両方のオービット (div) はシームレスに隣接して配置されます。最初の 1 匹が走り終えるまで、もう 1 匹は隠されています。途中で出会うと、1匹目は隠れ、2匹目は走り出します。

<div id="left"></div>
<div id="right"></div>

https://jsfiddle.net/leymannx/LWk74/ Chrome 31、Firefox 26、Safari 7、IE 10 & 11 でテスト済み (フィドルに組み込まれたクロスブラウザー互換性)

#left {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 150px;

  animation: animationLeft 5s linear infinite;
}

#right {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 350px;

  animation: animationRight 5s linear infinite;
}

@keyframes animationLeft {
  0%    { transform: rotate(0deg) translateX(100px); }
  50%   { transform: rotate(360deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(360deg) translateX(100px); visibility: hidden; }
}

@keyframes animationRight {
  0%    { transform: rotate(-180deg) translateX(100px); visibility: hidden; }
  50%   { transform: rotate(180deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(-180deg) translateX(100px); }
}

惑星で例示された円形パスのアニメーション化の詳細については、こちらを参照してください。またrotate(360deg)、translateX(100px)非常によく説明されています。

于 2014-01-08T14:35:49.667 に答える
2

そこで、3 つの選択肢があります。1つは、基本的にドットのサイズに応じて原点を右側に変換し、360度回転させ、回転が完了すると元の画像の左側に原点を変換し、反時計回りに0度回転させることです。そのためのペンです。まだ少しぎくしゃくしていますが、私はそれに取り組んでいます。

コデペン

2 番目のオプションは少し複雑ですが、より良いアニメーションが得られます。そのための 4 つのステップ。

  1. 点を斜め上から右に平行移動または移動します。
  2. 原点を斜めに（右下に）変換し、時計回りに数度回転させます。
  3. 原点を再び 50% 50% に変換し、左上に移動します。
  4. 反時計回りに回転させて手順 2 を繰り返します。

3 つ目はさらに複雑で、css だけでは実現できません。JavaScript を使用する必要があります。あなたができることは、レムニスケートとも呼ばれる無限大記号の方程式を実際に考え出し、現在の位置を基準にして位置を計算し、それをアニメーション化することです。

于 2013-10-11T20:37:52.657 に答える