CSSとの境界線をアニメーション化する方法は？

単純な効果のために遷移を使用して、境界線の色または幅をアニメーション化します。 2。アウトラインを使用して、アニメーション中のレイアウトシフトを回避します。 3.アニメーション可能なボックスシャドウで拡大する境界線をシミュレートします。 4.バックグラウンドサイズと遷移を備えたバックグラウンドグラデーションを使用して、図面または移動の境界効果を作成します。 5。Employ::前の::高度な階層化されたアニメーションのための擬似要素の後。ダイレクトボーダーアニメーションは制限されており、JavaScriptなしで魅力的な効果を可能にするため、各方法はBorderアニメーションを創造的にシミュレートします。

CSSの境界線をアニメーション化することで、ボタン、カード、リンクなど、要素に微妙で魅力的な視覚効果を追加することで、JavaScriptに依存することができます。滑らかに感じる方法（たとえば、0〜1px）でborderプロパティを直接アニメーション化することはできませんが、他のCSS機能を使用して巧妙な回避策があります。最も効果的な方法は次のとおりです。

1. transitionを伴うborder-colorの使用

ホバーにシンプルな色フェードまたは厚さの変更が必要な場合は、CSS遷移を使用して境界線の色または幅をアニメーション化できます。

 .Animated-Border {
  境界線：2px固体透明。
  遷移：ボーダーカラー0.3s容易さ。
}

.Animated-Border：Hover {
  境界線：＃007BFF;
}

Pro ：シンプルで広くサポートされています。
❌制限：境界線を「描く」ことはアニメーション化しません。色や幅です。

2。 outlineで境界線をシミュレートします

outline borderに似ていますが、スペースを占有することはなく、レイアウトシフトなしでアニメーション化しやすくなります。

 .Animated -Outline {
  アウトライン：2px固体透明。
  遷移：アウトラインカラー0.3s容易さ。
}

。
  アウトラインカラー：赤;
  アウトラインウィッド：4px;
}

アニメーション中にレイアウトに影響を与えないようにしたい場合に便利です。

3. 「成長」または「描画」の境界効果を作成するbox-shadow

box-shadowを使用して、輝くまたは拡大する境界線をシミュレートできます。これはアニメーション可能です。

 .glow-border {
  国境：2pxソリッド＃007bff;
  Box-Shadow：0 0 0 0 RGBA（0、123、255、0）;
  遷移：Box-Shadow 0.3s容易さ。
}

.glow-border：hover {
  Box-Shadow：0 0 0 10px RGBA（0、123、255、0.2）;
}

これにより、境界線が外側に拡大する効果が得られます。

4。アニメーションボーダー「描画」効果（ストロークなど）

（アニメーションストロークなど）ボックスの周りに自分自身を描く境界線をシミュレートするには、 linear-gradientとbackground-sizeのbackgroundを使用します。

 .draw-border {
  パディング：20px;
  背景： 
    線形勾配（白、白）パディングボックス、
    線形勾配（右、＃007BFF、＃00D4FF）ボーダーボックス。
  国境：4px固体透明。
  バックグラウンドクリップ：パディングボックス、ボーダーボックス。
  遷移：バックグラウンドポジション0.5s容易さ。
}

.Draw-Border：Hover {
  バックグラウンドポジション：0 -40px; / *勾配を「描画」ボーダーにシフト */
}

あるいは、より人気のある方法では、勾配が破壊されたbackgroundを使用して、移動する境界線をシミュレートします。

 .Moving-Border {
  パディング：20px;
  国境：4px固体透明。
  背景： 
    線形勾配（白、白）パディングボックス、
    繰り返し線形勾配（45DEG、＃007BFF、＃007BFF 10px、透明な10px、透明な20px）ボーダーボックス。
  バックグラウンドサイズ：200％200％;
  遷移：バックグラウンドポジション0.5s容易さ。
}

.Moving-Border：Hover {
  バックグラウンドポジション：100％100％;
}

これにより、境界線に対角線の移動ストライプ効果が作成されます。

5。 ::before fight orまたは::after for advanced effects

完全に制御するには、擬似要素を使用して、独立してアニメーション化できる境界線のような層を作成します。

 .Fancy-Border {
  位置：相対;
  パディング：20px;
  国境：2pxソリッド＃007bff;
}

.fancy-border :: before {
  コンテンツ： '';
  位置：絶対;
  挿入図：-2px;
  ボーダー：2pxソリッド＃FF6B6B;
  不透明：0;
  遷移：不透明度0.3秒の容易さ、0.3秒の容易さを変換します。
  変換：スケール（1.05）;
  ポインターイベント：なし;
}

.Fancy-Border：Hover :: before {
  不透明：1;
}

スケール、回転、または「二重境界線」グロー効果を作成することもできます。

まとめ

• 単純なフェードには、 border-colorまたはborder-widthのtransitionを使用します。
• レイアウトシフトを回避するためにoutlineを使用します。
• box-shadowを使用して、境界を拡大または輝く境界線を使用します。
• 「描画」または移動する境界効果にはbackgroundグラデーションを使用します。
• 使用::before / ::after 。

各方法は、目的の効果に応じてその場所にあります。微妙な相互作用のために、色の遷移に固執します。人目を引くアニメーションの場合、グラデーションと擬似エレメントを組み合わせます。

基本的に、あなたは国境を直接アニメーション化しているわけではありません。あなたはそれを賢い方法で偽造しています。そして、それがどのように行われるかです。

以上がCSSとの境界線をアニメーション化する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。