Efek cahaya adalah pokok desain. Mereka menambah estetika dan menciptakan suasana hati. Semuanya, mulai dari tanda neon yang ramai hingga film thriller sci-fi terlintas dalam pikiran.
Web adalah media yang sempurna untuk memanfaatkannya. Kita dapat menggunakannya untuk meningkatkan presentasi besar. Efek cahaya juga ada di rumah pada interaction mikro kecil seperti melayang pada tombol. Mereka sangat fleksibel.
Membuat efek ini bisa sesederhana menggunakan CSS. Ingin menendang semuanya? Perpustakaan JavaScript seperti GSAP akan membawa Anda ke sana. Either way, kemungkinannya sangat besar.
Berbicara tentang kemungkinan, mari kita jelajahi kumpulan efek cahaya bercahaya. Setiap cuplikan memiliki sesuatu yang unik untuk ditawarkan. Mereka juga menjalankan keseluruhan kasus penggunaan. Mari kita mulai!
Latar belakang animasi neuro noise dengan GLSL shader
Dibuat oleh Ksenia Kondrashova
Bicara tentang menciptakan getaran seram! Latar belakang animasi ini sepertinya langsung keluar dari X-Files. Presentasinya juga interaktif. Pindahkan perangkat penunjuk Anda dan sactionkan pergeseran cahaya hijau.
Lihat pena Neuro noise (GLSL shader) oleh Ksenia Kondrashova
Kartu Glow yang Digerakkan Gulir CSS
Dibuat oleh jhey
Tata letak kartu tanpa henti fleksibel. Di sini, efek cahaya adalah bintang pertunjukan. GSAP digunakan untuk menerapkan warna baru untuk setiap kartu saat Anda menggulir. Cahaya dan naungan membuat segalanya misterius dan terbaca.
Lihat pena Kartu Glow yang Digerakkan Gulir CSS ⚡️ oleh Jhey
Jam digital neon bersinar dengan CSS & JavaScript
Dibuat oleh Wheatup
Cahaya kobalt yang indah dengan sempurna memuji jam digital. Perhatikan bagaimana karakter dalam bayangan berubah seiring dengan jam, menit, dan detik. Ini cara yang kuat untuk menampilkan waktu.
Lihat pena Neon Clock (CSS) oleh Wheatup
Animasi Efek Glow Multiple
Dibuat oleh Simon Goellner
Berikut adalah contoh yang lebih praktis dari efek cahaya dalam action. Pilih antara setengah lusin efek hover yang berbeda pada tombol bercahaya ini. Perbatasannya secara progresif menyala dengan pola yang dipilih. Ini adalah cara yang pasti untuk mendapatkan perhatian pengguna.
Lihat pena Tombol Efek Multiple Glow oleh Simon Goellner
Gradien smoothie pelangi smooth smooth
Dibuat oleh Denise Trocchi
Siapa yang ingin sesuatu yang ceria minum? Contoh gulir halus ini menambah pendaran ke dalam campuran. Setiap smoothie virtual memiliki identitas warna sendiri. Gradien membantu memberi mereka cahaya, sementara navigasi juga menampilkan efek hover.
Lihat pena Smoothie pelangi (gulir halus #codePenchallenge) oleh Denise Trocchi
Tiket Supabase Animasi Seperti Kaca
Dibuat oleh Gambhir Sharma
Lihatlah detail yang memikat dari tiket virtual ini. Ikon baut pencahayaan menampilkan efek mengubah warna yang terlihat prismatik. Gaya seperti kaca mengikat seluruh presentasi bersama.
Lihat pena Tiket Supabase | CSS | oleh Gambhir Sharma
Cahaya abu -abu berdenyut tak terbatas
Dibuat oleh Shane Burns
Animasi ini menawarkan tampilan retro yang menghantui. Cahaya abu -abu berdenyut memberikan rasa bergerak melalui ruang dengan kecepatan tinggi. Kami tidak yakin ke mana arah pesawat ruang angkasa ini. Tapi sepertinya kita akan sampai di sana dengan cepat.
Lihat pena Tak terbatas oleh Shane Burns
Halaman pendaratan modern glassmorphic
Dibuat oleh juxtopposed
Berikut adalah contoh bagaimana efek cahaya dapat mendandani halaman. Warna -warna lembut muncul di belakang teks dan tombol pahlawan. Mereka detail kecil yang menambah kepribadian pada elemen generik.
Lihat pena Halaman pendaratan modern Glassmorphic dengan tombol squircle (responsif) dengan disandingkan
Hanya bersinar tentang kemungkinan
Efek cahaya adalah sentuhan akhir yang sempurna untuk komponen. Mereka bahkan membuat elemen kecil menonjol. Kami juga dapat menggunakannya untuk meningkatkan pengalaman pengguna (UX).
CSS telah berjalan jauh dalam membuat efek ini mudah diimplementasikan. Plus, menambahkan sedikit JavaScript dapat membantu Anda membuat sesuatu yang mendalam.
Contoh -contoh di atas menunjukkan kemungkinan. Mudah -mudahan, mereka menginspirasi Anda untuk menggunakan efek cahaya dengan cara baru!
Jika Anda ingin melihat lebih banyak cuplikan efek cahaya, lihat kami Koleksi Codepen.
Atas
