바닐라 CSS를 사용하여 네온 텍스트를 만드는 방법

텍스트에 빛을 더하는 기술인 CSS를 사용하여 네온 효과를 구현하는 방법을 알아봅니다.

텍스트에 글로우 효과를 추가하려면 text-shadow 속성이 필요합니다. text-shadow 속성은 텍스트에 적용되는 쉼표로 구분된 그림자 목록을 허용합니다. 각 그림자는 텍스트, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.
text-shadow: [x-offset] [y-offset] [blur-radius] [color];

글로우 효과 만들기

먼저 작은 흐림 반경으로 텍스트 문자의 바깥쪽 가장자리에 흰색 광선을 추가해야 합니다. 다음으로 쉼표로 구분된 여러 그림자를 추가하여 빨간색 광선을 추가합니다. 글로우에 깊이를 더하기 위해 서로 겹쳐 쌓일 수 있도록 이 모든 그림자가 필요합니다. 글로우 효과의 크기를 늘리려면 그림자의 흐림 반경을 늘립니다.

.neon-text {
  text-shadow: 
    #FFFFFF 0 0 12px,
    #A91079 0 0 25px,
    #A91079 0 0 35px,
    #A91079 0 0 45px;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
}

깜박임 효과 추가

네온사인에 대해 알아차릴 수 있는 한 가지는 그 중 일부, 특히 오래된 것들은 깜박이는 경향이 있다는 것입니다. 빛 종류는 들어오고 나갑니다. CSS 애니메이션으로 같은 종류의 일을 할 수 있습니다.

이를 달성하기 위해 @keyframes를 사용하여 네온이라는 사용자 지정 애니메이션을 만듭니다. 그런 다음 그림자를 키프레임으로 이동합니다. 키프레임은 깜박임 효과를 생성하기 위해 애니메이션 중에 선택한 지점에서 그림자를 적용하고 완전히 제거해야 합니다.

@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 
    #FFFFFF 0 0 12px,
    #A91079 0 0 25px,
    #A91079 0 0 35px,
    #A91079 0 0 45px;
  }

  20%, 24%, 55% {
    text-shadow: none;
  }
}

마지막으로 조명을 깜박이게 할 애니메이션을 호출합니다.

.neon-text {
  animation: neon 3s infinite alternate;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
}

nexuscode.online에서 작업 애니메이션을 보고 최종 코드로 플레이할 수 있습니다.

기술에 도전하세요

위의 링크에서 코드를 포크하고 다양한 색조와 색상은 물론 흐림 반경 크기를 실험하고 다양한 애니메이션도 시도하는 것을 잊지 마십시오. 공유하고 싶은 깔끔한 그림자 효과를 만들었다면 댓글을 남겨주세요.
읽어 주셔서 감사합니다.