CSSで破線の枠線をアニメートする方法

装飾された境界線はページ上の任意の要素を装飾することができますが、スタイルに関してはCSSの境界線は制限されています。開発者は頻繁にCSSグラデーションの境界線、SVGの境界線、複数の境界線などのボックスの境界線とそのアニメーションの外観を模倣し、アップグレードするためのソリューションを思い付く.

今日は、点線枠の簡単なハック、つまり点線枠のアニメーションについて説明します。アニメーション化された破線の境界線は、 アウトライン そして ボックスシャドウ, フォールバックについては大したことはありません。 アウトライン IE8以降でサポートされています。 SVGまたはグラデーションが使用されているときとは異なり、ユーザーはまだ境界を見ることができます。これで二色のダッシュも作成できます。見てみましょう.

枠線を作成する

まず枠線を作成します。これには、破線の枠線とボックスの影を使用します。.

 .バナーアウトライン：6px黄色の破線; box-shadow：0 0 0 6px＃EA3556;… 

の アウトライン そのすべての値が必要になります。幅、種類、色の ボックスシャドウ の値だけが必要です 広がる これは、アウトラインの幅と色と同じでなければなりません。アウトラインとボックスシャドウの両方を一緒にすると、2色のダッシュの効果が生まれます。.

あなたはそれからあなたの望みのボーダーが隅に見えるようにボックスの幅または高さを調整することができます.

国境をアニメートする

最初のアニメーションの例では、CSSキーフレームアニメーションを一連のバナーに追加し、境界線を連続的にアニメーション化して注目を集めます。アニメーション効果のために、アウトラインとボックスの影の色を入れ替えるだけです。.

@keyframes animateBorder からoutline-color：＃EA3556;ボックスシャドウ：0 0 0 6ピクセルイエロー。 

あなたが使用してアウトラインの色をターゲットにすることができます アウトラインカラー ただし、ボックスシャドウの場合は、今のところは速記プロパティにすべての値を指定する必要があります。.

アニメーションの準備ができたら、それをボックスに追加します.

.バナーアウトライン：6px黄色の破線;ボックスシャドー：0 0 0 6px＃EA3556。 animation：1s animateBorder無限;…

国境の変遷

トランジションの例では、写真に境界線を追加し、ホバーでそれらをアニメートします。さまざまな効果に合わせて境界線のサイズを変更することもできます.

.写真アウトライン：20px破線＃006DB5;ボックスシャドウ：0px 0px 0px 20px＃3CFDD3。遷移：すべて1;… .photos：ホバーoutline-color：＃3CFDD3;ボックスシャドウ：0 0 0 20px＃006DB5。 

さて、これらの画像の上にマウスを移動すると、CSSの点線がアニメーションの栄光の中で点線で表示されます。.

そして、それはラップです。あなたは破線の境界線を点線の境界線で置き換えることを試みることができますが、効果はそれほど良くないかもしれません。アニメーション中にアウトラインの種類を変更して、さらにいくつかの効果を得ることもできます。.