CSSを使用して枠線アニメーションを作成する

CSS は、Web ページに動きと面白さを加える、美しく魅力的な境界線アニメーションを作成するために使用されます。境界線アニメーションを作成するには、まず、作成する要素の境界線を定義する必要があります。アニメーションを付けたい場合は、CSS トランジションとアニメーションを使用して境界線に動きを追加します。

境界線アニメーションは、ボタン、リンク、その他のインタラクティブな要素にホバー効果を作成するために使用できます。また、境界線アニメーションを使用して、ページまたは要素の読み込み中に進行状況を示す読み込みアニメーションを作成することもできます。呼び出し時に境界線アニメーションを使用することもできます-to-action ボタンをより目立つようにします。

アプローチ - 1

ユーザーが要素の上にマウスを置いたときに要素の境界線をアニメーション化するホバー効果を作成します。

＃＃＃アルゴリズム＃＃＃

HTML ドキュメントを作成し、タイトルを「ホバー効果境界線アニメーション」として定義します。

• ドキュメントの本文を設定し、フレックスボックスを使用してボックスを中央に配置し、背景色 #48b6ff を設定します。 インライン ブロック表示、10 ピクセルのパディング、18 ピクセルのフォント サイズ、色 #333、および 2 ピクセルの透明な実線境界を持つボックス クラスを定義します。遷移時間は 0.5 秒で、遷移効果は容易です。

無限の持続時間とイーズインアウトのタイミングで、パルスアニメーションを境界線に追加します。 マウスがボックス上にあるときに境界線を赤、緑、青にフェードさせ、脈動アニメーションを無効にします。

• 境界線の色を赤、緑、青に変えるキーフレームを使用して、パルス アニメーションを定義します。 box クラスを含む div 要素を HTML ドキュメントの本文に追加します。

• HTML ファイルを保存して Web ブラウザで表示すると、ホバー効果の境界線アニメーションが表示されます。

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

Example

リーリー

方法 - 2

ここでは、読み込みアイコンの枠線をアニメーション化して読み込みアニメーションを作成します。

＃＃＃アルゴリズム＃＃＃

宣言を使用して、ドキュメント タイプを HTML として宣言します。

• タグを開いて HTML ドキュメントを開始します。

• タグ内に タグを追加します。

• タグ内に