CSSのビューポート周辺のバウンス要素

このCSSのみのアニメーションは、スクリーンセーバーやポンゲームを模倣して、跳ね返る要素効果を作成します。キーは、ViewPortユニット（ vwおよびvh ）とcalc()を使用して、そのサイズに関係なく、ブラウザウィンドウ内の要素の動きを動的に決定することです。アニメーションは、x軸とy軸を親と子の要素上の個別のアニメーションに巧みに分離し、独立した方向の反転とより自然なバウンスを可能にします。

元のコードは、親と子供の2つのネストされたDIVを使用します。親は水平方向の動きを処理し、子供は垂直運動を処理します。これにより、XおよびYバウンスの独立した制御が可能になります。

これがコードの内訳です：

HTML構造：

<div class="container">
  <div class="bouncer"></div>
</div>

CSSスタイリング：

CSSは、より良い制御と読みやすさのためにカスタムプロパティ（変数）を利用しています。

 ：根 {
  -Width：100px; / *バウンス要素のサイズ */
  -X-Speed：13s; / *水平アニメーション速度 */
  -Yスピード：7s; / *垂直アニメーション速度 */
   - 貿易速度：2.2秒; / *スムーズバウンスの遷移速度 */
}

.container { / *水平運動の親要素 * /
  アニメーション：x var（ -  x-speed）線形無限の代替。
}

.Bouncer { / *垂直運動のための子要素 ​​ /
  幅：var（ -  width）;
  高さ：var（ -  width）;
  バックグラウンドカラー：＃007bff; / *例の例 */
  ボーダーラジウス：50％; / *それを円にします */
  アニメーション：y var（ -  y-speed）線形無限の代替。
  / *スムーズなバウンスの移行を追加 */
  遷移：変換var（ - トランジションスピード）容易さ。
}

@KeyFrames X {
  100％{
    変換：translatex（calc（100vw-var（ -  width）））;
  }
}

@KeyFrames Y {
  100％{
    変換：translatey（calc（100VH-var（ -  width）））;
  }
} 

このアプローチは、コードを簡潔かつ効率的に保つために、JavaScriptの必要性を回避します。 animationプロパティのalternateキーワードは、アニメーションの方向を自動的に逆転させ、バウンス効果を作成します。 calc()関数により、要素がビューポートのエッジに跳ね返り、異なる画面サイズに動的に調整されます。 .bouncerクラスにtransitionプロパティを追加すると、バウンス方向の間のより滑らかな遷移が提供されます。 --x-speed 、 --y-speed 、および--width変数を調整すると、アニメーションの速度とサイズをカスタマイズできます。

以上がCSSのビューポート周辺のバウンス要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。