CSSを使用してアニメーションを分割要素にバインドするにはどうすればよいですか?

とも呼ばれる Division 要素は、HTML 要素をグループ化し、CSS を使用してスタイルを設定するためによく使用されます。アニメーションは、グラフィック要素をより魅力的にするための視覚効果を備えたものです。 HTML と CSS では、通常、この要素に

という名前を付けます。この記事では、CSS がアニメーションを分割要素にバインドする方法について説明します。

キーフレームメソッドを使用してアニメーションを定義する

キーフレーム メソッドは、CSS でアニメーション効果を作成するために最も一般的に使用されるメソッドです。

＃＃＃例＃＃＃ リーリー

説明

の中国語訳は次のとおりです:

説明

HTML コードでは、アニメーションにクラス "container" の Division 要素を使用します。 @keyframes ルールで定義されたアニメーションは、要素を交互のループで 0 ピクセルから右の 100 ピクセルまで移動し、次に右の 200 ピクセルまで移動します。
CSS コードは、幅がビューポートの 50%、高さがビューポートの 10%、背景色が紫の「コンテナ」クラスを定義します。 「myAnimation 2s 無限交互」の値を持つ「animation」プロパティを使用して、要素にアニメーションを適用します。 div 要素は HTML 本文内に含まれており、Web ブラウザーで表示するとアニメーションが適用されます。
クリッピングパスを使用する

前の例を理解していれば、非常に多くのコード行を手動で記述する必要があるため、非常に複雑なアニメーションを作成するのは非常に難しいことがわかったはずです。したがって、優れたアニメーション効果を実現するために使用できるツールは他にもたくさんあります。その例の 1 つは、クリッピング パスの使用です。

clip-path は、要素の残りの部分を非表示にし、要素の特定の領域を表示 (クリップ) するように指定できる CSS プロパティです。
円、長方形、多角形、SVG パスなどの基本的な形状を使用して作成できるクリッピング パスによって領域を定義できます。

• ＃＃＃例＃＃＃ リーリー
説明

の中国語訳は次のとおりです:

説明

ここでは、HTML ドキュメントはフレックス コンテナを使用して、子要素を水平方向と垂直方向の中央に配置して表示します。 body 要素の高さは 100vh で、.container クラスには円形のクリッピング マスクとホバー トランジション効果があります。

• .container クラスには、背景色、幅、パディングとテキストの配置、境界線の半径 20 ピクセル、および円形マスクを作成するクリップパス プロパティがあります。ホバー疑似クラスは、1 秒のトランジション効果でクリップパスのサイズを変更します。

• このトピックをさらに詳しく調べるには、次のチュートリアルを読んでトピックの詳細を学ぶことをお勧めします -

  https://www.tutorialspoint.com/css/css_clip.htm ＃＃＃結論は＃＃＃
この記事では、CSS を使用してアニメーションを div 要素にバインドする方法を学びました。同じことを行うためにキーフレーム メソッドを使用する方法を特別に検討します。期間、遅延、動作などのアニメーションのプロパティをカスタマイズできます。

以上がCSSを使用してアニメーションを分割要素にバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。