CSS アニメーション ガイド: 揺れるエフェクトを作成する方法をステップごとに説明します

CSS アニメーション ガイド: 揺れる効果を作成する方法を段階的に説明します。

Web デザインでは、アニメーション効果を使用して、ページに生き生きとしたインタラクティブな雰囲気を加えることができます。 CSSアニメーションとは、WebページにCSSルールを適用することでアニメーション効果を実現する技術です。一般的なアニメーション効果の 1 つはシェイク効果です。これは要素に揺れるアニメーション効果を追加し、Web ページに活力を加えることができます。この記事では、ゼロから説明し、揺れ効果を作成する方法を段階的に説明し、具体的なコード例を示します。

ステップ 1: HTML 構造の作成
まず、HTML ファイル内に「shake」を想定した要素を作成する必要があります。これを

タグでラップし、「shake-element」などの一意の ID 属性を追加できます。以下はサンプル コードです:

<div id="shake-element">
  这里是要添加抖动特效的内容
</div>

ステップ 2: CSS スタイルを定義する
次に、要素にジッター効果を追加する CSS スタイルを定義する必要があります。要素の開始位置を定義し、キーフレーム アニメーション効果を適用してジッター効果を作成します。以下は CSS スタイルの例のコードです。

#shake-element {
  position: relative;
  animation: shake-animation 1s infinite;
}

@keyframes shake-animation {
  0% { transform: translateX(0); }
  10% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  30% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  60% { transform: translateX(10px); }
  70% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  90% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

この CSS コードでは、最初に要素に position:relative を設定して、要素が元の位置に対して確実にジッターするようにします。次に、キーフレーム アニメーション@keyframesを通じてジッター アニメーションの特定の効果を定義します。キーフレーム アニメーションでは、パーセンテージごとに要素の異なる位置が定義され、要素の水平方向の移動は transform:transform:translateX() 属性によって制御されます。この例では、要素のジッター位置を制御するために時間の 10% を使用します。

ステップ 3: CSS スタイルを適用する
最後のステップは、定義された CSS スタイルを HTML 要素に適用することです。つまり、タグの ID 属性を通じて CSS スタイルを選択し、参照します。 HTML ファイルの タグでは、