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

Rumah

hujung hadapan web

tutorial css

Mencipta Kesan Cahaya Neon Zarah Terapung dengan HTML, CSS dan JavaScript

DDD

Dec 11, 2024 pm 03:27 PM

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 bulan yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

1 bulan yang lalu By DDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

2 minggu yang lalu By DDD

Inzoi: Cara Memohon ke Sekolah dan Universiti

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7788

Tutorial Java

1644

Tutorial CakePHP

1401

Tutorial Laravel

1298

Tutorial PHP

1234

Tunjukkan Lagi

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.

Membina aplikasi Ethereum menggunakan redwood.js dan fauna Mar 28, 2025 am 09:18 AM

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Apr 02, 2025 pm 06:17 PM

Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.

Kad yang disusun dengan kedudukan melekit dan sasaran sass Apr 03, 2025 am 10:30 AM

Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.

Sedikit di CI/CD Apr 02, 2025 pm 06:21 PM

Saya '

Membandingkan penyemak imbas untuk reka bentuk responsif Apr 02, 2025 pm 06:25 PM

Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis

Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Apr 02, 2025 am 04:27 AM

Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?

Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'? Apr 05, 2025 pm 05:51 PM

Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...

See all articles