⭐️ CSS로 구현하는 동적 스포트라이트 효과

프로젝트를 진행하다 보니, 일반적인 배경을 주고 색상을 입히는것은 식상하지 않을까하여 찾아보게 된 기술중 내 마음에 확 사로잡은 효과가 있기에 기록을 해보려고 한다..!
그건 바로 스포트라이트 효과~! 🎥✨
애니메이션과 그라디언트를 적절히 이용하여 만들 수 있었다...

앞뒤로 가상요소를 적절히 배치를 한뒤, 애니메이션 효과로 마치 조명을 이동시키곤, scale을 사용하여 커졌다 작아졌다를 반복 시키도록 하였다.
각각의 가상요소의 위치를 배정해야하나?
놉. delay를 주면 마치 각각의 요소를 별도로 준것과 같이 움직이게 할 수 있다는 점...!!

핵심 기술

• CSS 가상 요소 (::before, ::after)
• radial-gradient()
• @keyframes 애니메이션

구현 코드

header::before,
header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 59, 59, 0.2) 0%,
    transparent 70%
  );
  animation: spotlightMove 10s ease-in-out infinite alternate;
}

header::after {
  animation-delay: -5s;
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 255, 0.2) 0%,
    transparent 70%
  );
}

@keyframes spotlightMove {
  0% {
    transform: translate(-30%, -30%) scale(1.2);
  }
  100% {
    transform: translate(30%, 30%) scale(0.8);
  }
}

동작 원리 설명

1. 가상 요소로 레이어 생성

header::before,
header::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

• ::before와 ::after로 두 개의 독립적인 스포트라이트 레이어 생성
• position: absolute로 header 요소를 기준으로 위치 설정

2. 원형 그라디언트로 빛 표현

background: radial-gradient(
  circle at center,  /* 중심점 설정 */
  rgba(255, 59, 59, 0.2) 0%,  /* 중심부 색상 */
  transparent 70%  /* 테두리 투명도 */
);

• radial-gradient()로 원형 그라디언트 생성
• 중심부터 바깥으로 점점 투명해지는 효과
• 두 번째 레이어는 다른 색상으로 설정하여 중첩 효과 생성

3. 애니메이션으로 움직임 추가

animation: spotlightMove 10s ease-in-out infinite alternate;

• 10s: 애니메이션 지속 시간
• ease-in-out: 부드러운 가속/감속
• infinite: 무한 반복
• alternate: 역방향 재생으로 자연스러운 움직임

4. 키프레임 정의

@keyframes spotlightMove {
  0% {
    transform: translate(-30%, -30%) scale(1.2);
  }
  100% {
    transform: translate(30%, 30%) scale(0.8);
  }
}

• translate(): 위치 이동
• scale(): 크기 변화
• 두 transform 속성을 조합하여 움직임과 크기 변화 동시 적용

5. 애니메이션 딜레이로 다중 효과

header::after {
  animation-delay: -5s;
}

• 두 번째 레이어에 음수 딜레이 적용
• 각각 다른 타이밍으로 움직이며 입체감 생성

커스터마이징 포인트

1. 그라디언트 색상 조정

rgba(255, 59, 59, 0.2) /* 빨간색 스포트라이트 */
rgba(59, 130, 255, 0.2) /* 파란색 스포트라이트 */

2. 애니메이션 속도와 범위

animation: spotlightMove 10s /* 지속 시간 */
transform: translate(-30%, -30%) /* 이동 범위 */

3. 그라디언트 크기

transparent 70% /* 그라디언트 종료 지점 */

마치며

간단한 CSS만으로도 동적이고 세련된 스포트라이트 효과를 만들 수 있었다..!🎨
애니메이션을 다루는것이 아직은 어색하고 갈길이 멀지만, 이렇게 배워가는거겠지