HTML, CSS 및 JavaScript를 사용하여 부동 입자 네온 조명 효과 만들기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML, CSS 및 JavaScript를 사용하여 부동 입자 네온 조명 효과 만들기

DDD

Dec 11, 2024 pm 03:27 PM

이 튜토리얼에서는 순수 HTML, CSS 및 JavaScript를 사용하여 떠다니는 입자로 매혹적인 네온 조명 효과를 만들어 보겠습니다. 각 구성 요소를 분석하고 이러한 놀라운 시각 효과를 만들기 위해 어떻게 함께 작동하는지 설명하겠습니다.

Creating a Floating Particles Neon Light Effect with HTML, CSS, and JavaScript

1. 핵심 구조의 이해

기본 HTML 구조를 분석하는 것부터 시작하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>



<p>Here's what each element does:</p>

로그인 후 복사

light-effect: Main container for our neon effect
light-inner: Creates the core glow effect
light-outer: Adds an additional layer of luminosity and rotation

2. CSS Variables and Root Setup

First, let's understand our CSS variables:

:root {
    --blur-size: min(40vw, 40vh);
}

로그인 후 복사

이 변수는 다음과 같은 이유로 중요합니다.

민감한 크기 조정을 위해 min() 사용
뷰포트 너비(vw)와 높이(vh)를 결합합니다
다양한 화면 크기에 비례하는 효과 생성

3. 바디 스타일링 심층 분석

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

로그인 후 복사

각 속성을 분석해 보겠습니다.

margin: 0: 기본 간격을 제거합니다
오버플로: 숨김: 스크롤 막대를 방지하고 입자를 포함합니다
배경: 검정색: 네온 효과를 위한 대비를 만듭니다
높이/너비: 100vh/vw: 전체 뷰포트 범위 보장
디스플레이: flex: 중앙 위치 지정 활성화
justify-content/align-items: center: 완벽한 센터링

4. 주 조명 효과 컨테이너

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

로그인 후 복사

주요 측면 설명:

크기 조정: 반응형 크기에 CSS 변수를 사용합니다
포지셔닝:
- 위치: 고정: 스크롤 중 안정성 보장
- 위쪽/왼쪽: 50%: 뷰포트 중앙의 위치
- 변환: 변환(-50%, -50%): 완벽한 센터링
흐림 효과:
- 크기에 따른 동적 블러
- 부드럽고 사실적인 빛 연출
애니메이션:
- 부드러운 효과를 위한 8초 지속
- 자연스러운 움직임을 위한 이즈인아웃 타이밍

5. 내부 조명 레이어 세부정보

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

로그인 후 복사

경도 분석:

중앙(0%):
- 불투명도 20%의 보라색 톤
- 핵심 밝기 생성
중간층(30%):
- 불투명도 15%에서 더 어두운 보라색
- 깊이를 더하다
외부 레이어(50%):
- 불투명도 10%의 파란색 톤
- 전환 생성
엣지(70%):
- 투명하게 희미해짐
- 부드러운 가장자리 블렌딩

6. 외부 조명 레이어 세부정보

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

로그인 후 복사

특수효과 분석:

그라데이션 구조:
- 강렬함을 위한 화이트 센터
- 보라색 중간 색상
- 깊이를 더해주는 블루 아우터
애니메이션:
- 10초 회전
- 부드러운 움직임을 위한 선형 타이밍
블렌딩:
- 빛나는 효과를 위한 화면 모드
- 광채와 색상 혼합 향상

7. 애니메이션 키프레임 설명

<!DOCTYPE html>
<html>
<head>
    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>



<p>Here's what each element does:</p>

로그인 후 복사

light-effect: Main container for our neon effect
light-inner: Creates the core glow effect
light-outer: Adds an additional layer of luminosity and rotation

2. CSS Variables and Root Setup

First, let's understand our CSS variables:

:root {
    --blur-size: min(40vw, 40vh);
}

로그인 후 복사

애니메이션 세부정보:

펄스네온:
- 번역으로 중앙 위치 유지
- 1에서 1.1 사이의 확장
- 호흡 효과 생성
회전 그라데이션:
- 완전한 360도 회전
- 지속적인 움직임
- 역동성을 더하다

8. 파티클 시스템 심층 분석

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

로그인 후 복사

입자 특성:

기본 입자:
- 고정 위치
- 반투명 흰색
- 원형 모양
- 포인터 이벤트 없음
크기 변형:
- min()을 사용한 반응형 크기 조정
- 다른 애니메이션 속도
- 모든 기기에서 비율 유지

9. 입자 이동 애니메이션

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

로그인 후 복사

이동 분석:

시작(0%):
- 뷰포트 아래에서 시작
- 보이지 않는 상태
페이드 인(20%):
- 부드러운 불투명도 전환
주요 운동(20-80%):
- 전체 가시성
- 꾸준한 상승 모션
종료(80-100%):
- 페이드 아웃 효과
- 뷰포트 위 약간 겹침

10. 동적 입자 생성

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

로그인 후 복사

기능 분석:

입자 생성:
- 동적 DOM 요소 생성
- 임의의 크기 할당
- 확률적 분포
포지셔닝 로직:
- 임의의 가로 배치
- 랜덤 애니메이션 지연
메모리 관리:
- 자동 정리
- 크기에 따른 기간
- 메모리 누수 방지

11. 반응형 디자인 구현

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

로그인 후 복사

대응 고려사항:

태블릿 장치(768px 이하):
- 상대적 크기 증가
- 비율 유지
모바일 기기(480px 이하):
- 최대 상대 크기
- 작은 화면에 최적화

12. 성능 최적화

@keyframes pulseNeon {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

로그인 후 복사

최적화 전략: