순수 CSS로 만드는 깜빡이는 뉴트론 구형 — JavaScript 필요 없음
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자 및 UI/UX 디자이너
난이도: 중급 (CSS 애니메이션 및 그라디언트 이해 필요)
핵심 요약
- 순수 CSS만으로 뉴트론 구형 효과 구현 (JavaScript/XSS 없음)
@keyframes
를 활용한 펄스(pulse) 및 시머(shimmer) 애니메이션 적용radial-gradient
+box-shadow
조합으로 3D 효과 및 플라즈마 빛 표현.neon-sphere
클래스와::after
의사요소를 통해 내부 빛 반사 효과 구현
섹션별 세부 요약
1. HTML 구조
- 단일
div
요소로 구성 ()
body
에radial-gradient
배경 적용 (화면 전체 블랙 톤)flex
레이아웃으로 구형 정중앙 배치
2. CSS 핵심 기술
- 3D 구형 효과:
border-radius: 50%
+radial-gradient(circle at 30% 30%)
- 플라즈마 빛:
box-shadow
4단계 적용 (0 0 20px
,0 0 40px
,0 0 60px
,inset 0 0 30px
) - 애니메이션:
- @keyframes pulse
: transform: scale(1.05)
+ box-shadow
강도 증가
- @keyframes shimmer
: translate(10px, 10px)
로 내부 빛 이동 효과
3. 활용 사례
- UI 배경 요소: 로딩 화면, Sci-Fi 대시보드, 인터랙티브 위젯
- 디자인 패턴:
filter: blur(8px)
로 시머 효과의 모호한 빛 감도 조절 - 커스터마이징:
background
및box-shadow
색상 값 변경 가능
결론
radial-gradient
와@keyframes
를 결합해 3D 뉴트론 구형 효과 구현 가능::after
의사요소로 내부 빛 반사 효과를 추가해 현실감 강화- JavaScript 없이도 복잡한 애니메이션 구현 가능 → CSS의 2025년 기술적 가능성 시연
- 색상(
#00ffff
) 및 애니메이션 속도(6s
) 조정으로 다양한 스타일 적용 가능