CSS의 text-shadow 속성과 @keyframes 애니메이션을 활용하면 별도의 이미지나 JavaScript 없이도 부드럽게 깜빡이는 빛나는 텍스트(Glowing Text) 효과를 쉽게 구현할 수 있습니다. 아래 예제 코드를 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: rgb(0, 0, 0);
font-family: cursive;
}
.glowing {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing 1s ease-in-out infinite alternate;
-moz-animation: glowing 1s ease-in-out infinite alternate;
animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
}
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>코드 설명
1. 배경 설정
body 요소에 검정색(rgb(0, 0, 0)) 배경을 지정하면 빛나는 효과가 더욱 돋보입니다. 어두운 배경 위에서 text-shadow로 만든 빛 번짐이 선명하게 보이기 때문입니다.
2. 텍스트 스타일링
.glowing 클래스에서는 글자 크기를 80px로 크게 설정하고, 글자색을 흰색(#fff)으로 지정한 뒤 가운데 정렬합니다.
3. 애니메이션 적용
animation: glowing 1s ease-in-out infinite alternate; 구문은 'glowing'이라는 이름의 애니메이션을 1초 동안 진행하고, 무한 반복(infinite)하며, alternate 옵션으로 재생 방향을 번갈아 전환하도록 합니다. 덕분에 빛이 밝아졌다가 다시 어두워지는 자연스러운 깜빡임 효과가 완성됩니다. 크롬·사파리용 -webkit-, 파이어폭스용 -moz- 접두사를 함께 작성하면 다양한 브라우저에서 호환됩니다.
4. keyframes로 빛 정의하기
@keyframes glowing 블록에서는 from(시작) 상태와 to(끝) 상태의 text-shadow 값을 각각 정의합니다. 여러 겹의 그림자를 쉼표로 나열해 흰색 코어부터 파란색·보라색 계열의 넓은 후광까지 단계적으로 퍼지는 빛을 표현할 수 있습니다.
실행 결과
위 코드를 브라우저에서 실행하면 검은 배경 위에서 흰색 텍스트가 파란빛과 보라빛으로 반짝이며 부드럽게 깜빡이는 것을 확인할 수 있습니다.