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

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

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

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

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

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

この構造「falling-effect」クラスの <div> 要素を含むセクションを作成します。これは、次の手順でアニメーション効果を定義するために使用します。

ステップ 2: CSS スタイルを設定する

次に、CSS ファイル内でこの要素のスタイルを設定する必要があります。必要に応じて変更できる基本的なスタイル定義を次に示します。

.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;
}

上の例では、width と height を 10px、## に定義しました。 #background-color は黒、position は絶対位置であり、要素を画面の上部に配置します。 left 属性は要素を水平方向の中央に配置し、transform 属性は要素が中央に表示されるように位置を調整するために使用されます。また、border-radius 属性を使用して要素を円形に設定します。

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

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

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

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

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

  animation: fall 3s linear infinite;
}

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

以上がCSS アニメーション ガイド: 落下エフェクトの作成方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。