CSSを使用して四角形から虹のハートをアニメーション化しますか?

HTML、CSS、JavaScript を組み合わせてアニメーションを作成し、Web ページまたは Web サイトに実装できます。 CSS には、アニメーションの作成に使用できるプロパティが多数用意されています。そのため、フロントエンド開発に強力な機能を提供する CSS をスタイル設定に使用することをお勧めします。

この記事では、CSS を使用して 3 秒ごとに色が変わるハートの形を作成し、アニメーションを使用して 2 つのステップで作成します。

レインボーハートを作成する手順

本体の 2 つの異なる部分を作成し、次に 2 つのクラスを作成します。1 つは正方形、もう 1 つはコンテナです。また、本文にいくつかのプロパティを追加し、表示するすべてのものを中央に配置する CSS セクションも作成します。次のコードを使用してコンテナを作成します。

＃＃＃例＃＃＃

以下の例では、いくつかのプロパティを追加し、アニメーションが再生されるハートの形を作成しました。以下のコードは、HTML および CSS コードの出力を示します。

リーリー

円には異なる色が付けられていますが、円を区別できるようにそのままにしておきます。

さあ、このハートを動かしてみましょう。これを行うには、心臓に動きを追加し、キーフレーム プロパティを使用して色を変更します。新しいフレームが出現するたびにハートの色が変わります。

作成したハートの動きが四角に変化し、再びハートに戻ります。これを行うには、transform プロパティを使用して、正方形をハートの形に変換します。ここでその方法について説明しました。

＃＃＃例＃＃＃

以下のコードでは、最初にコンテナとハートの形を作成するために使用したのと同じコードを使用し、次に色を 0% から 100% に設定するいくつかのキーフレームを追加します。各キーフレームの色が変化し、四角形がハート型に変化して見えます。コードを使用した後に何が起こるかを理解するために、出力を見てみましょう。

リーリー

最初の出力はこのように正方形になります。その後、フレームごとに正方形がハートの形に変形しているかのような錯覚が生じます。その後、変換後に再びループして正方形になります。各フレームは回転します。フレームが変わると色も変わります。完成したハートはこんな感じです。

最後に、広場から完全なハートが見えます。

＃＃＃結論は＃＃＃

最近では、Web サイト内のアニメーションが非常に一般的になっており、これらのアニメーションが Web サイトの実際の外観と雰囲気を決定します。これらのアニメーションの目的は通常、ユーザーを惹きつけること、またはユーザーが何かを理解しやすくすることです。 CSS は、わずか数行のコードでこれらのアニメーションを作成できる非常に強力なツールです。アニメーションには間にフレームが含まれており、CSS の keyframe プロパティを使用してフレームを変更します。

この記事では、3 秒ごとに色が変わる CSS を使用して、正方形からアニメーションの虹のハートを作成する方法を学びました。

以上がCSSを使用して四角形から虹のハートをアニメーション化しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。