BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]ピュアCSS3によるネオンライト効果

2022-01-11 21:20:29

これが実現したい効果です。

ご覧のように、マウスをボタンの中に入れるとネオンライトのような効果があり、マウスをボタンの外に出すと、一定の経路（ボタンの外側）を移動する光線があります。

ネオンライトの実装

ネオンライトの実装は比較的簡単で、複数のシャドウを使用して行います。ボタンに3層の影を付け、それぞれの層は内側から外側に向かってぼかし半径が大きくなるようにし、複数の影を重ねることでネオンライトのような効果を演出しています。そのためのコードは以下の通りです。

HTMLです。 

 <div class="light">
    Neon Button
 </div>

CSSです。 

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 0 25px #03e9f4,
              0 0 0 50px #03e9f4,
              0 0 0 200px #03e9f4;
}

最終的には以下のようになります。

モーションビームの実装

ボタンの縁に沿って1本のビームが動いているように見えますが、実は4本のビームがそれぞれ異なる方向に動き、それが重なり合っている効果なのです。下の図のように、左から右、上から下、右から左、下から上の方向に動いています。

その際、ビーム同士が交差しているのですが、ボタンのエッジ部分だけを見てみると、とても1本のビームだけが時計回りに動いているように見えます。

具体的な実装で注意すべき点は以下の通りです。

  • 4つの光線はdiv.lightの4つのサブディビジョンに対応し、初期状態ではボタンの左端、上端、右端、下端に配置され、一定方向に反復運動します。
  • 各ビームは縦または横が小さく（わずか2px）、透明からネオン色へのグラデーションがかかっているため、見た目には収束する効果があります（つまり、一列に並んでいるようには見えません）。
  • 時計回りに見えるように、実際には、ボタンの上のビームから始まり、一定時間後に右のビーム、一定時間後に下のビーム、一定時間後に左のビームと、4つのビームが順番に動いています。ビームとビームの動きには遅れがあります。例えば右側の運動距離が上側の運動距離より小さいために、両者が同時に動き出すと、この2本のビームが交差しなくなってしまい、バラバラで支離滅裂なビームを見ることになるのです。右側のビームは移動距離が短いので、上側のビームがそれに追いつくためには、右側のビームの出発を遅らせる必要があり、アニメーション遅延を与える必要があります。複数のアニメーション遅延の差は、およそ 0.25 秒です。
  • ボタンの端にあるビームだけを表示すれば十分なので、div.lightにオーバーフローを与えて非表示にします。

コードはこのようになります。

HTMLです。 

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>

CSSです。 

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 0 25px #03e9f4,
              0 0 0 50px #03e9f4,
              0 0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

これにより、記事のオープニング画像の効果を得ることができます。

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

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

<ブロッククオート

CSS 関数 hue-rotate() は、要素およびそのコンテンツの色相を回転させます。

最終的には以下のようになります。

上記はネオン効果の詳細の純粋なCSS3実装であり、ネオン効果のCSS3実装に関する詳細な情報は、スクリプトの家の他の関連記事に注意を払うしてください！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します