CSS アニメーション ガイド: 落下エフェクトの作成方法を段階的に説明します。

CSS アニメーション ガイド: 落下エフェクトを作成する方法を段階的に説明します

CSS アニメーションは、Web デザインで一般的に使用されるテクノロジの 1 つで、活力と活力を加えることができます。ウェブページにアピールします。その中でも、落下エフェクトの作成は非常に人気のあるアニメーションエフェクトです。この記事では、落下エフェクトの作成方法と具体的なコード例をステップバイステップで説明します。

ステップ 1: HTML 構造の作成

まず、HTML ファイル内に、特殊効果を適用する要素を含むセクションを作成します。例:

<div class="falling-effect"></div>

この構造「falling-effect」クラスの <div> 要素を含むセクションを作成します。これは、次の手順でアニメーション効果を定義するために使用します。 <p>ステップ 2: CSS スタイルを設定する</p> <p>次に、CSS ファイル内でこの要素のスタイルを設定する必要があります。必要に応じて変更できる基本的なスタイル定義を次に示します。 </p><pre class='brush:css;toolbar:false;'>.falling-effect { width: 10px; height: 10px; background-color: #000; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-radius: 50%; animation: fall 3s linear infinite; }</pre><p>上の例では、<code>width と height を 10px、## に定義しました。 #background-color は黒、position は絶対位置であり、要素を画面の上部に配置します。 left 属性は要素を水平方向の中央に配置し、transform 属性は要素が中央に表示されるように位置を調整するために使用されます。また、border-radius 属性を使用して要素を円形に設定します。

重要なことは、上記の CSS コードでは、3 秒間で直線的かつ無限に再生される「fall」という名前のアニメーションを定義していることです。次のステップでは、「fall」と呼ばれるこのアニメーションを定義します。

ステップ 3: アニメーションを定義する

CSS ファイルでは、

@keyframes ルールを使用してアニメーションの特定の効果を定義する必要があります。以下に例を示します。必要に応じて変更できます。

@keyframes fall {
  0% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 100vh);
  }
}

上記のコードでは、

@keyframes ルールを使用して、 "fall" という名前のアニメーションを定義します。 0% では要素は初期位置にあり、上に -10px 移動します。 100% では、要素は 100vh 下、つまり画面の一番下に移動します。vh の単位はビューポートの高さのパーセンテージを表します。 。

ステップ 4: アニメーションを適用する

最後のステップは、前に作成した要素にアニメーションを適用することです。これを行うには、要素の

animation 属性にアニメーション名を追加します。その前に、animation-delay や animation-timing-function などの他のアニメーション プロパティを設定することもできます。以下に例を示します。

.falling-effect {
  /* 其他样式 */

  animation: fall 3s linear infinite;
}

上記のコードは、「落下」アニメーションを

.falling-effect クラスの要素に適用します。アニメーションの長さは 3 秒で、時間の一次関数を使用し、無限に再生されます。

上記の4つの手順を踏むだけで、落下系の特殊効果アニメーションが簡単に作成できます。もちろん、要素の色、移動方向、速度を変更するなど、必要に応じて変更および拡張することができます。 CSS アニメーションは、Web ページにさらなるインタラクティブ性と魅力をもたらします。このガイドがお役に立てば幸いです。