CSS ファンタスティックボーダーアニメーション効果の実装

今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェースを見つけました。

特に境界線の部分など、そのスタイルは非常にユニークだと思います。

こんにちは。CSS を使用して境界線で何ができるかを確認するための、境界線に関する特別な記事があります。

境界プロパティ

境界線について話すとき、最初に思い浮かぶのはborder 。最もよく使用されるのは、 solidとdashedです。上の図では、 dashed表示されています。

最も一般的なsolidとdashedに加えて、 CSS border はnone 、 hidden 、 dotted 、 double 、 groove 、 ridge 、 inset 、 outsetなどのスタイルもサポートします。 noneとhiddenを除いて、ネイティブにサポートされているすべての境界線スタイルを見てみましょう。

これらは基本です。別のスタイルの境界線を実装したり、境界線にアニメーションを追加したりする場合は、他の属性を使用するか、想像力を働かせる必要があります。さて、さらに興味深い境界線をいくつか見てみましょう。

境界線の長さの変更

次のような境界線効果を実現するには、まずは簡単なものから始めましょう。

実際、ここでは要素の 2 つの疑似要素が借用されています。 2 つの疑似要素は、それぞれ上と左の境界線と下と右の境界線のみを設定し、 hoverと 2 つの疑似要素の高さと幅を変更します。とてもわかりやすいです。

div {
    位置: 相対的;
    境界線: 1px 実線 #03A9F3;
     
    ＆：：前に、
    ＆：：後 {
        コンテンツ： "";
        位置: 絶対;
        幅: 20px;
        高さ: 20px;
    }
     
    ＆：：前に {
        上: -5px;
        左: -5px;
        上境界線: 1px 実線 var(--borderColor);
        左境界線: 1px 実線 var(--borderColor);
    }
     
    ＆：：後 {
        右: -5px;
        下: -5px;
        境界線下部: 1px 実線 var(--borderColor);
        右境界線: 1px 実線 var(--borderColor);
    }
     
    &:hover::before,
    &:hover::after {
        幅: calc(100% + 9px);
        高さ: calc(100% + 9px);
    }
}

CodePen デモ - 幅の境界線アニメーション

次に難易度を上げていきます。

破線境界アニメーション

dashedキーワードを使用すると、破線の境界線を簡単に作成できます。

div {
    境界線: 1px 破線 #333;
} 

もちろん、私たちの目標は境界線をアニメーション化することです。 dashedキーワードを使用してこれを回避する方法はありません。しかし、CSS で点線を実現する方法は数多くあり、グラデーションは良い方法です。

div {
    背景: linear-gradient(90度、#333 50%、透明0) repeat-x;
    背景サイズ: 4px 1px;
    背景位置: 0 0;
}

グラデーションを使用してシミュレートされたこの破線を見てみましょう。

グラデーションは複数のグラデーションをサポートします。コンテナの 4 つの辺すべてにグラデーションを使用できます。

div {
    背景：
        線形グラデーション(90度、#333 50%、透明度0) 繰り返しx、
        線形グラデーション(90度、#333 50%、透明度0) 繰り返しx、
        線形グラデーション(0度、#333 50%、透明度0) 繰り返しy、
        線形グラデーション(0度、#333 50%、透明0) repeat-y;
    背景サイズ: 4px 1px、4px 1px、1px 4px、1px 4px;
    背景位置: 0 0, 0 100%, 0 0, 100% 0;
}

効果は以下のとおりです。

さて、この時点で、点線の境界線のアニメーションは実際には半分以上完成しています。 border-style: dashedアニメーションをサポートしていませんが、グラデーションはサポートしています。上記の div にhover効果を追加し、 hover時のanimationを追加し、要素のbakcground-position変更します。

div:ホバー{
    アニメーション: linearGradientMove .3s 無限線形;
}
 
@keyframes 線形グラデーション移動 {
    100% {
        背景の位置: 4px 0、-4px 100%、0 -4px、100% 4px;
    }
}

では、効果を見てみましょう。マウスを合わせると境界線が動きます。アニメーション全体が最初から最後までつながっているため、無限ループ アニメーションでは点線の境界線が常に動いているように見えます。これはちょっとしたトリックです。

ここにもう一つの小さなトリックがあります。点線の境界線のアニメーションを他の境界線から点線の境界線に移行させてから前進させたい場合です。グラデーションを使用して完全にシミュレートすることも可能です。コードを節約したい場合は、次のようにborderを使用すると高速になります。

div {
    境界線: 1px 実線 #333;
     
    &:ホバー{
        境界線: なし;
        背景：
            線形グラデーション(90度、#333 50%、透明度0) 繰り返しx、
            線形グラデーション(90度、#333 50%、透明度0) 繰り返しx、
            線形グラデーション(0度、#333 50%、透明度0) 繰り返しy、
            線形グラデーション(0度、#333 50%、透明0) repeat-y;
        背景サイズ: 4px 1px、4px 1px、1px 4px、1px 4px;
        背景位置: 0 0, 0 100%, 0 0, 100% 0;
    }
}

ボックス モデルでは境界線と背景の位置が異なるため、視覚的に明らかなずれが生じます。

この問題を解決するには、 outlineでoutline-offset設定できるため、 border outlineに置き換えます。これにより、この問題は完全に解決されます。

div {
    アウトライン: 1px 実線 #333;
    アウトラインオフセット: -1px;
     
    &:ホバー{
        アウトライン: なし;
    }
}

最後に、実際のボタンに適用された効果を見てみましょう。

上記のデモの完全なコードは次のとおりです。

CodePen デモ - 破線境界線アニメーション

実際、背景と境界線の特別な関係により、境界線を使用する場合は、 background-position変更することで問題を解決できますが、より複雑になります。背景と枠線の塗りつぶしの関係については、こちらの記事を参照してください: 縞模様の枠線を実装するさまざまな方法

グラデーションのその他の用途

グラデーションを使用すると、上記以上の効果を実現できます。

グラデーションをさらに深く掘り下げて、グラデーションを使用して次のような背景を実現します。

div {
    位置: 相対的;
     
    ＆：：後 {
        コンテンツ： '';
        位置: 絶対;
        左: -50%;
        上: -50%;
        幅: 200%;
        高さ: 200%;
        背景繰り返し: 繰り返しなし;
        背景サイズ: 50% 50%、50% 50%;
        背景位置: 0 0, 100% 0, 100% 100%, 0 100%;
        背景画像: 線形グラデーション(#399953, #399953)、線形グラデーション(#fbb300, #fbb300)、線形グラデーション(#d53e33, #d53e33)、線形グラデーション(#377af5, #377af5);
    }
}

ここでは、このグラフィックを生成するために要素の疑似要素が使用されており、幅と高さはどちらも親要素の200%であり、制限を超える場合はoverflow: hiddenに注意してください。

次に、回転を追加します。

div {
    アニメーション: 4 秒間、直線的に無限回転します。
}
 
@keyframes 回転 {
    100% {
        変換: 回転(1回転);
    }
}

効果をご覧ください:

最後に、疑似要素を使用して中央部分をマスクすると、素敵な境界線アニメーションが表示されます。

上記のデモの完全なコードは次のとおりです。私が最初にこのエフェクトを見たのは、作者のJesse B

CodePen デモ - グラデーション ボーダー アニメーション

グラデーションの色を変更する

上記の基本的なテクニックをマスターしたら、グラデーションの色を調整することができます。4 色を 1 色に変えてみましょう。

div::after {
    コンテンツ： '';
    位置: 絶対;
    左: -50%;
    上: -50%;
    幅: 200%;
    高さ: 200%;
    背景色: #fff;
    背景繰り返し: 繰り返しなし;
    背景サイズ: 50% 50%;
    背景位置: 0 0;
    背景画像: 線形グラデーション(#399953, #399953);
}

次のようなグラフを取得します。

同様に、一緒に回転させると、モノクロの境界線を追うアニメーションが表示されます。

CodePen デモ - グラデーション ボーダー アニメーション 2

わあ、かなり良さそうですね。ただし、1 本の線の場合、境界線の端が垂直ではなく小さな三角形になるという明らかな欠陥があり、一部のシーンには適用できないか、PM が受け入れない可能性があります。

これらの小さな三角形を消す方法はありますか?はい、次の記事ではclip-pathを使用してこれらの小さな三角形を除去する方法を紹介します。

conic-gradientの魔法

clip-pathを紹介する前に、角度グラデーションについて説明しましょう。

上記では主に線形グラデーションlinear-gradientを使用しています。実際にconic-gradientを使用するとまったく同じ効果が得られます。

今度は暗いスタイルでconic-gradientもう一度使用してみましょう。コアコードは次のとおりです。

.conic {
    位置: 相対的;
     
    ＆：：前に {
        コンテンツ： '';
        位置: 絶対;
        左: -50%;
        上: -50%;
        幅: 200%;
        高さ: 200%;
        背景: conic-gradient(透明、rgba(168, 239, 255, 1)、透明30%);
        アニメーション: 4 秒間、直線的に無限回転します。
    }
}
@keyframes 回転 {
    100% {
        変換: 回転(1回転);
    }
}

効果図と模式図は以下のとおりです。部分的に角度のグラデーションをつけた図形を回転させ、中央部分を別の疑似要素でマスクして、線の部分だけを露出させます。

CodePen デモ - 回転する境界線 3

clip-pathの魔法

再び、古くからの友人であるclip-pathです。 興味深いことに、いつもそこにあります。

clip-path自体は座標点をアニメーション化し、あるクリッピング形状から別のクリッピング形状に変換できます。

この機能を使用すると、このような境界追従効果を巧みに実現できます。疑似コードは次のとおりです。

div {
    位置: 相対的;
 
    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0;
        左: 0;
        右: 0;
        下部: 0;
        境界線: 2px 金色;
        アニメーション: クリップパス 3 秒 無限線形;
    }
}
 
@keyframes クリップパス {
    0%、
    100% {
        クリップパス: インセット(0 0 95% 0);
    }
    25% {
        クリップパス: インセット(0 95% 0 0);
    }
    50% {
        クリップパス: インセット(95% 0 0 0);
    }
    75% {
        クリップパス: インセット(0 0 0 95%);
    }
}

効果図は回路図​​と一緒に表示されます。

CodePen - クリップパス境界アニメーション

ここでは、要素が切り取られるため、疑似要素を切り取りやアニメーションの背景として使用できます。clip clip-pathを使用する利点は、切り取られた境界線によって小さな三角形が生成されないことです。同時に、このメソッドは丸いborder-radiusもサポートします。

別の疑似要素を使用して実際にボタン スタイルを実装すると、次の効果が得られます。

CodePen - クリップパス境界アニメーション 2

overflowの魔法

次のトリックはオーバーフローを使用します。このような境界アニメーションを実装するには:

なぜoverflowを使用することで実現できると言われるのでしょうか?

概略図を投稿します:

CodePen デモ - オーバーフローと変換を使用してラインのホバー効果を実現する

2つの核心ポイント:

• コンテナの外側にあった要素全体を非表示にするにはoverflow: hiddenを使用します。
• transform-origin要素の回転中心を制御するために使用されます。

興味深い CSS 効果のほとんどすべてが同様のテクニックを使用していることに気付きましたか?

簡単に言えば、私たちが見るアニメーションは、元の現象のほんの一部に過ぎません。特定の切り取り、透明度の変更、マスキングなどにより、最終的に元の現象の一部しか見ることができません。

border-imageの魔法

border-imageを使用すると、興味深い境界アニメーションを実現することもできます。 border-imageに関しては、 border-image の正しい使用方法を説明した非常に優れた記事があります。この記事では、基本的な定義についてはあまり詳しく説明しません。

このような画像があったとします。

同様の境界線パターンを取得するには、 border-image-sliceおよびborder-image-repeatプロパティを使用できます。

div {
  幅: 200ピクセル;
  高さ: 120px;
  境界線: 24px 実線;
  画像の境界: url(画像のURL);
  境界画像スライス: 32;
  画像の繰り返し境界線: 丸い;
}

これを基に、要素の高さと幅を自由に変更して、任意のサイズのコンテナー境界に拡張することができます。

CodePen デモ -- border-image デモ

次に、この記事「border-image を使用して SVG をアニメーション化する方法」では、 border-imageを使用した境界アニメーションについても説明されており、非常に便利です。

上記の例と異なるのは、パターンを動かすだけでよいことです。つまり、次のような背景画像が必要です (Blog Garden は SVG アニメーションをサポートしていません。元の画像のアドレス:

次に、動く境界線画像も取得できます。コードはまったく同じですが、境界線が動いています。

CodePen デモ - 踊るスカルボーダー

border-imageグラデーションを使用する

テクスチャ参照urlに加えて、 border-image色やグラデーションで直接塗りつぶすこともできます。

以前、 border-imageに関する記事もありました - 角を丸くしたグラデーションボーダーを巧みに実装する

border-image + filter + clip-pathを使用すると、グラデーション変換による丸い境界線を実現できます。

.border-image-clip-path {
    幅: 200ピクセル;
    高さ: 100px;
    境界線: 10px 実線;
    画像の境界線: 線形グラデーション(45度、ゴールド、ディープピンク) 1;
    クリップパス: inset(0px round 10px);
    アニメーション: huerotate 6s 無限線形;
    フィルター: 色相回転(360度);
}
 
@keyframes 回転 {
    0% {
        フィルター: 色相回転(0度);
    }
    100% {
        フィルター: 色相回転(360度);
    }
} 

CodePen デモ - clip-path、border-image、フィルターを組み合わせて丸みのあるグラデーションの境界線を実現

やっと

この記事では、私が興味深いと思った境界線アニメーションのヒントをいくつか紹介します。もちろん、CSS によって生成される興味深い効果は他にもたくさんありますが、スペースの制限があるため、1 つずつ詳しく説明することはしません。

CSS クリエイティブ ボーダー アニメーション効果の実装に関するこの記事はこれで終わりです。CSS ボーダー アニメーションに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。