Mencipta Kesan Cahaya Neon Zarah Terapung dengan HTML, CSS dan JavaScript-tutorial css-php.cn

Dalam tutorial ini, kami akan membina kesan cahaya neon yang menawan dengan zarah terapung menggunakan HTML, CSS dan JavaScript tulen. Kami akan memecahkan setiap komponen dan menerangkan cara ia bekerjasama untuk mencipta kesan visual yang menakjubkan ini.

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

1. Memahami Struktur Teras

Mari kita mulakan dengan memecahkan struktur HTML asas:

<!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>

Salin selepas log masuk

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);
}

Salin selepas log masuk

Pembolehubah ini penting kerana:

Menggunakan min() untuk memastikan saiz responsif
Menggabungkan lebar port pandangan (vw) dan ketinggian (vh)
Mencipta kesan berkadar merentas saiz skrin yang berbeza

3. Penggayaan Badan Selam Dalam

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

Salin selepas log masuk

Jom pecahkan setiap harta benda:

margin: 0: Mengalih keluar jarak lalai
limpahan: tersembunyi: Menghalang bar skrol dan mengandungi zarah
latar belakang: hitam: Mencipta kontras untuk kesan neon
tinggi/lebar: 100vh/vw: Memastikan liputan port pandangan penuh
paparan: flex: Mendayakan kedudukan berpusat
justify-content/align-item: center: Pemusatan sempurna

4. Bekas Kesan Cahaya Utama

.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;
}

Salin selepas log masuk

Aspek utama dijelaskan:

Saiz: Menggunakan pembolehubah CSS untuk dimensi responsif
Kedudukan:
- kedudukan: tetap: Memastikan kestabilan semasa menatal
- atas/kiri: 50%: Kedudukan di pusat viewport
- ubah: terjemah(-50%, -50%): Pemusatan sempurna
Kesan Kabur:
- Kabur dinamik berdasarkan saiz
- Mencipta cahaya lembut dan realistik
Animasi:
- Tempoh 8 saat untuk kesan lancar
- masa mudah masuk untuk pergerakan semula jadi

5. Butiran Lapisan Cahaya Dalam

.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;
}

Salin selepas log masuk

Analisis kecerunan:

Pusat (0%):
- Nada ungu dengan kelegapan 20%
- Mencipta kecerahan teras
Lapisan Tengah (30%):
- Ungu lebih gelap pada kelegapan 15%
- Menambah kedalaman
Lapisan Luar (50%):
- Nada biru pada kelegapan 10%
- Mencipta peralihan
Tepi (70%):
- Pudar kepada lutsinar
- Campuran tepi licin

6. Butiran Lapisan Cahaya Luar

.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;
}

Salin selepas log masuk

Pecahan kesan khas:

Struktur Kecerunan:
- Pusat putih untuk keamatan
- Tengah ungu untuk warna
- Biru luar untuk kedalaman
Animasi:
- Putaran 10 saat
- Pemasa linear untuk pergerakan lancar
Penggabungjalinan:
- mod skrin untuk kesan bercahaya
- Meningkatkan cahaya dan campuran warna

7. Kerangka Kunci Animasi Diterangkan

<!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>

Salin selepas log masuk

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);
}

Salin selepas log masuk

Butiran animasi:

pulseNeon:
- Mengekalkan kedudukan tengah dengan terjemah
- Skala antara 1 dan 1.1
- Mencipta kesan pernafasan
rotateGradient:
- Putaran 360 darjah penuh
- Pergerakan berterusan
- Menambahkan dinamik

8. Selam Dalam Sistem Zarah

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

Salin selepas log masuk

Ciri-ciri zarah:

Zarah Asas:
- Kedudukan tetap
- Putih separuh lutsinar
- Bentuk bulat
- Tiada acara penunjuk
Varian Saiz:
- Saiz responsif menggunakan min()
- Kelajuan animasi yang berbeza
- Mengekalkan perkadaran pada semua peranti

9. Animasi Pergerakan Zarah

.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;
}

Salin selepas log masuk

Kerosakan pergerakan:

Mula (0%):
- Mulakan di bawah port pandangan
- Keadaan halimunan
Pudar Masuk (20%):
- Peralihan kelegapan lancar
Pergerakan Utama (20-80%):
- Keterlihatan penuh
- Pergerakan stabil ke atas
Keluar (80-100%):
- Kesan pudar
- Tindan sedikit di atas port pandangan

10. Penjanaan Zarah Dinamik

.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;
}

Salin selepas log masuk

Analisis fungsi:

Penciptaan Zarah:
- Penciptaan elemen DOM dinamik
- Tugasan saiz rawak
- Taburan kebarangkalian
Logik Kedudukan:
- Peletakan mendatar rawak
- Lengah animasi rawak
Pengurusan Memori:
- Pembersihan automatik
- Tempoh berdasarkan saiz
- Menghalang kebocoran ingatan

11. Pelaksanaan Reka Bentuk Responsif

.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;
}

Salin selepas log masuk

Pertimbangan responsif:

Peranti Tablet (≤768px):
- Meningkatkan saiz relatif
- Mengekalkan perkadaran
Peranti Mudah Alih (≤480px):
- Saiz relatif maksimum
- Dioptimumkan untuk skrin kecil

12. Pengoptimuman Prestasi

@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);
    }
}

Salin selepas log masuk

Strategi pengoptimuman:

Selang Responsif:
- Kurang zarah pada mudah alih
- Melaraskan kepada keupayaan peranti
Pengurusan Memori:
- Mengosongkan selang lama
- Menghalang berbilang kejadian
Pengendalian Acara:
- Membalas saiz semula tetingkap
- Mengekalkan prestasi

Kesimpulan

Kesan ini menggabungkan berbilang lapisan kecanggihan:

Pembolehubah CSS dinamik untuk saiz responsif
Gabungan kecerunan kompleks untuk cahaya realistik
Sistem zarah untuk menambah kedalaman
Pengoptimuman prestasi untuk operasi lancar
Reka bentuk responsif untuk semua peranti

Hasilnya ialah kesan neon yang menawan yang boleh meningkatkan mana-mana projek web dengan kesan prestasi yang minimum.

Atas ialah kandungan terperinci Mencipta Kesan Cahaya Neon Zarah Terapung dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!