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

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

WBOY

リリース： 2023-10-20 14:27:12

オリジナル

1296 人が閲覧しました

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

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

Web デザインにおいて、アニメーション効果はユーザーエクスペリエンスを向上させる重要な要素の 1 つです。そしてユーザーの注目を集めます。 CSS アニメーションは、純粋な CSS を使用してアニメーション効果を実現するテクノロジーです。今日は、Web ページをより鮮やかで興味深いものにするために、見事な揺れ効果を作成する方法を段階的に説明します。

まず、基本的な HTML 構造を作成しましょう。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>CSS动画指南</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

ログイン後にコピー

次に、関連するスタイルとアニメーションの定義を CSS ファイル (ここでは style.css とする) に追加する必要があります。コードは次のとおりです。

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-10px, -10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0);
  }
}

ログイン後にコピー

上記のコードでは、0.5 秒のアニメーション効果を .box 要素に追加し、アニメーション名を shake に設定します。次に、@keyframes キーワードを使用して、shake アニメーションのキーフレームを定義します。

キーフレームでは、5 つの時点でスタイルの変化を設定します。 0% はアニメーションの開始状態を表し、100% はアニメーションの終了状態を表します。 25%、50%、および 75% はそれぞれ、さまざまな時点でのアニメーションの中間状態を表します。 transform 属性と translate 関数を使用すると、要素を水平および垂直に移動して、震える効果を実現できます。

最後に、上記のコードを style.css ファイルとして保存し、HTML ファイルに関連付ける必要があります。次に、ブラウザで揺れの効果を確認できます。

上記は、震える特殊効果を作成するための完全な手順です。ニーズに応じてアニメーションの長さ、変位、色などのパラメータを調整して、Web デザインにより適したものにすることができます。

要約すると、CSS アニメーションテクノロジは、Web デザイナーにアニメーション効果を実現するシンプルかつ強力な方法を提供します。関連するテクノロジーとツールを習得することで、Web ページにさまざまなアニメーション効果を簡単に追加して、ユーザーエクスペリエンスを向上させ、ユーザーの注目を集めることができます。この記事があなたのお役に立てば幸いです。そして、あなたが Web デザインの道をさらに前進できることを願っています。

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