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

[CSSチュートリアル】クールなネオン効果を実現するピュアCSS（デモあり）

2022-01-11 12:06:21

最近、tubeのCSS Animation Effects Tutorialシリーズを見ていると、面白いCSSエフェクトがたくさん紹介されています。その中でもネオンのエフェクトがかっこいいので、そのアイデアの実装について簡単な記録とシェアを紹介します。

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

画像

ご覧のように、マウスをボタンの中に入れるとネオンのような光が発生し、マウスをボタンの外に出すと一定の軌跡（ボタンの外周）を光線が移動するようになっています。

ネオンライトの実装

ネオンライトの実装は比較的簡単で、複数のシャドウを使用して実現します。ボタンに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本のビームが交差しなくなってしまい、バラバラで支離滅裂なビームを見ることになるのです。右側のビームの方が移動距離が短いので、上側のビームが「追いつく」ためには、右側のビームの出発を「遅らせる」必要があり、アニメーション遅延を与える必要があります。同様に、残りの2つのビームもアニメーション遅延を与える必要があります。複数のアニメーション遅延の差は、約0.25秒です。
  • ボタンの端にあるビームだけを表示すれば十分なので、div.lightにoverflowを与えて隠します。

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

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()は、要素とそのコンテンツの色相を回転させる関数です。

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

クールなネオン効果（デモ付き）を達成するために純粋なCSSのこの記事は、より関連するCSSネオンコンテンツは、スクリプトのホーム以前の記事を検索したり、次の関連記事を閲覧を続けてください、私はあなたがよりスクリプトのホームをサポートすることを願っています導入されています！...

関連

最新

おすすめ

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