クールなネオンライト効果を実現する純粋な CSS (デモ付き)

私は最近、YouTube の CSS アニメーション効果チュートリアルシリーズをフォローしています。このシリーズでは、多くの興味深い CSS アニメーション効果が紹介されています。 1 つ目は、非常にクールなネオンライト効果です。ここでは、簡単なレコードを作成し、実装のアイデアを共有します。

達成される効果は次のとおりです。

マウスがボタン内に移動すると、ネオンライトのような効果が生成され、マウスがボタンから外に出ると、光線が固定された軌道に沿って（ボタンの周りを）移動することがわかります。

ネオンライトの実現

ネオンライトの実装は比較的簡単で、複数の影を使用して行うことができます。ボタンに 3 層の影を追加し、各層の影のぼかし半径は内側から外側に向かって大きくなります。複数の影を重ね合わせると、ネオンライトのような効果が得られます。このセクションのコードは次のとおりです。

HTML:

 <div class="light">
    ネオンボタン
 </div>

CS: ...

体 {
 背景: #050901;   
}
。ライト {
  幅: コンテンツに合わせる;
  パディング: 25px 30px;
  色: #03e9f4;
  フォントサイズ: 24px;
  テキスト変換:大文字;
  遷移: 0.5秒;
  文字間隔: 4px;
  カーソル: ポインタ;
}
.light:hover {
  背景色: #03e9f4;
  色: #050801;
  ボックスシャドウ: 0 0 5px #03e9f4,
              0 0 25ピクセル #03e9f4,
              0 0 50ピクセル #03e9f4,
              0 0 200px #03e9f4;
}

最終的な効果は次のようになります。

移動ビームの実装

ボタンの端に沿って 1 本のビームだけが動いているように見えますが、実際には異なる方向に動く 4 本のビームが重ね合わされています。移動方向は、次の図に示すように、左から右、上から下、右から左、下から上です。

このプロセスの間、光線は互いに交差します。ボタンの端だけを見ると、1 つの光線だけが時計回り方向に動いているように見えます。
具体的な実装において注意すべき点をいくつか挙げます。

4 つのビームは、div.light の 4 つのサブ div に対応しています。ビームの初期位置はボタンの左端、上端、右端、下端で、一定の方向に繰り返し移動します。
各ビームは高さも幅も非常に小さく（わずか 2 ピクセル）、透明からネオンへのグラデーションがあるため、収束しているように見えます（完全な線ではありません）。
私たちが見ているものが時計回りの動きであることを確認するために、4 つのビームの動きは実際には順序どおりになっています。まず、ボタンの上のビームが動き始め、しばらくすると右側のビームが動き、しばらくすると下のビームが動き、しばらくすると左側のビームが動きます。光線間の移動には遅延があります。上と右の光線を例にとると、これらが同時に動き始めると、右側の移動距離が上の移動距離よりも小さいため、2 つの光線が交差する機会を逃し、私たちが目にするのは、切断された、一貫性のない光線になります。右ビームの移動距離が短いため、上のビームがそれに「追いつく」ためには、右ビームの「出発を遅らせる」必要があり、アニメーションの遅延を与える必要があります。同様に、残りの 2 つのビームにもアニメーションの遅延が必要です。複数のアニメーション間の遅延は約 0.25 秒で十分です。
ボタンの端の周りにビームを表示すれば十分なので、div.lightにoverflow hiddenを設定します。

コードは次のとおりです。

HTML:

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    ネオンボタン
</div>

CS: ...

。ライト {
  位置: 相対的;
  パディング: 25px 30px;
  色: #03e9f4;
  フォントサイズ: 24px;
  テキスト変換:大文字;
  遷移: 0.5秒;
  文字間隔: 4px;
  カーソル: ポインタ;
  オーバーフロー: 非表示;
}
.light:hover {
  背景色: #03e9f4;
  色: #050801;
  ボックスシャドウ: 0 0 5px #03e9f4,
              0 0 25ピクセル #03e9f4,
              0 0 50ピクセル #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  位置: 絶対;
}
.light div:n番目の子(1){
  幅: 100%;
  高さ: 2px;
  上: 0;
  左: -100%;
  背景: 線形グラデーション(右へ、透明、#03e9f4);
  アニメーション: animate1 1s 線形無限;
}
.light div:n番目の子(2){
  幅: 2px;
  高さ: 100%;
  上: -100%;
  右: 0;
  背景: 線形グラデーション(下へ、透明、#03e9f4);
  アニメーション: animate2 1s 線形無限;
  アニメーション遅延: 0.25秒;
}
.light div:n番目の子(3){
  幅: 100%;
  高さ: 2px;
  下部: 0;
  右: -100%;
  背景: 線形グラデーション(左へ、透明、#03e9f4);
  アニメーション: animate3 1s 線形無限;
  アニメーション遅延: 0.5秒;
}
.light div:n番目の子(4){
  幅: 2px;
  高さ: 100%;
  下部: -100%;
  左: 0;
  背景: 線形グラデーション(上へ、透明、#03e9f4);
  アニメーション: animate4 1s 線形無限;
  アニメーション遅延: 0.75秒;
}
@keyframes アニメーション1 {
  0% {
    左: -100%;
  }
  50%,100% {
    左: 100%;
  }
}
@keyframes アニメーション2 {
  0% {
    上: -100%;
  }
  50%,100% {
    上: 100%;
  }
}
@keyframes アニメーション3 {
  0% {
    右: -100%;
  }
  50%,100% {
    右: 100%;
  }
}
@keyframes アニメーション4 {
  0% {
    下部: -100%;
  }
  50%,100% {
    下部: 100%;
  }
}

これにより、記事の冒頭の写真の効果が得られます。

さまざまな色のネオンライト

他の色でネオンライト効果を実現したい場合はどうすればよいでしょうか?関連する色を再度変更する必要がありますか?実際、もっと簡単な方法があります。それは、filter:hue-rotate(20deg) を使用して、div.light とすべての内部要素の色相/色調を一度に変更することです。

hue-rotate() CSS 関数は、要素とその内容の色相を回転します。

最終的な効果は次のようになります。

純粋な CSS でクールなネオンライト効果を実現する方法についての記事はこれで終わりです (デモ付き)。CSS ネオンライトに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: iframe の src が指すコンテンツが更新されない問題の解決方法の詳細な説明

>>: MySQLトリガートリガー例の詳細な説明