Saya membuat efek animasi dengan CSS. Cukup gunakan properti CSS di bawah ini. Saya harap ini membantu Anda
.pulse { animation: pulse 3s infinite; animation-direction: alternate; -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.5); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
Contoh
Bagikan Bagikan di Facebook Facebook Bagikan di twitter Twitter Bagikan di linkedin LinkedIn
Anda Mungkin Juga Menyukai Video HTML5 tidak dapat diputar di Safari, iPhone, dan iPad W3 Mind 23 November 2022 Banyak orang menghadapi masalah bahwa video tidak berfungsi di perangkat iPhone dan iPad dan terutama saat video disetel ke putar otomatis. Kami melihat
Cara Meningkatkan PageSpeed Website Dengan Menggunakan WP Meteor
W3 Mind 21 November 2022
Apakah Anda lelah mencoba meningkatkan kecepatan situs Anda? . Hari ini kita akan pergi
Baca Lebih Lanjut →Cara Mengecualikan Halaman Dari Pengoptimalan di Plugin WP Meteor
W3 Mind 20 November 2022
Apakah Anda juga menggunakan WP Meteor untuk meningkatkan waktu muat situs Anda dan situs Anda rusak?
Baca Lebih Lanjut →Daftar Periksa Pre-LIVE dan Post-LIVE Untuk Diikuti Di Situs WordPress
W3 Mind 16 November 2022
Apakah Anda khawatir setiap kali Anda LANGSUNG dengan situs WordPress, Jadi saya akan memberi tahu Anda cara sukses LANGSUNG situs WordPress tanpa
Teks neon dapat menambahkan sentuhan futuristik yang bagus ke situs web mana pun. Saya selalu menyukai keajaiban tanda neon, dan ingin membuatnya kembali menggunakan CSS. Saya pikir saya akan membagikan beberapa tip tentang cara melakukannya. Pada artikel ini, kita akan melihat bagaimana menambahkan efek bercahaya pada teks. Kita juga akan melihat berbagai cara untuk menganimasikan tanda neon, semuanya menggunakan CSS dan bingkai utama
Inilah yang akan kita buat
Menambahkan efek cahaya ke teks
Pertama, mari buat teks bersinar. Ini dapat dilakukan di CSS dengan properti text-shadow: [x-offset] [y-offset] [blur-radius] [color];5. Apa yang bagus tentang text-shadow: [x-offset] [y-offset] [blur-radius] [color];5 adalah kita dapat menerapkan banyak bayangan di atasnya hanya dengan memisahkannya dengan koma
.neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }text-shadow: [x-offset] [y-offset] [blur-radius] [color];5 membutuhkan empat nilai, dua nilai pertama mewakili posisi horizontal dan vertikal bayangan, masing-masing. Nilai ketiga mewakili ukuran blur radius sedangkan nilai terakhir mewakili warna bayangan. Untuk meningkatkan ukuran efek cahaya, kita akan meningkatkan nilai ketiga, yang merepresentasikan radius buram. Atau, diungkapkan dengan cara lain
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_Inilah yang kami dapatkan dengan sedikit CSS itu
CodePen Embed Fallback
Hal berikutnya yang mungkin Anda tanyakan adalah ada apa dengan semua nilai itu?
.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }_Lima nilai terakhir adalah bayangan teks yang lebih lebar dari radius buram yang lebih besar yang membentuk cahaya hijau
.neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }Akan sangat bagus jika kita bisa menyelesaikan ini dengan kurang dari lima bayangan, tetapi kita membutuhkan semua bayangan ini agar bisa ditumpuk satu sama lain untuk menambah kedalaman cahaya. Jika kita menggunakan text-shadow: [x-offset] [y-offset] [blur-radius] [color];_5 sebagai gantinya, efeknya tidak akan memiliki kedalaman yang diperlukan untuk membuatnya terlihat realistis
CodePen Embed Fallback
Silakan bereksperimen dengan berbagai rona dan warna serta ukuran radius buram. Ada berbagai macam efek cahaya keren yang dapat Anda buat, jadi cobalah variasi yang berbeda — Anda bahkan dapat mencampur dan mencocokkan warna di mana satu warna menyatu dengan yang lain
Efek "berkedip".
Satu hal yang mungkin Anda perhatikan tentang lampu neon adalah beberapa di antaranya — terutama yang lebih tua — cenderung berkedip. Jenis cahaya masuk dan keluar. Kita dapat melakukan hal yang sama dengan animasi CSS. Mari raih text-shadow: [x-offset] [y-offset] [blur-radius] [color];_9 untuk membuat animasi yang menyalakan dan mematikan lampu dengan kilatan acak yang tampak acak
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; } }Itu benar-benar itu. Kami telah mengambil properti dan nilai text-shadow: [x-offset] [y-offset] [blur-radius] [color];_5 yang sama persis dengan yang kami miliki sebelumnya, membungkusnya dalam animasi text-shadow: [x-offset] [y-offset] [blur-radius] [color];9 yang disebut .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }2, dan memilih titik di garis waktu untuk menerapkan bayangan, serta titik yang benar-benar menghilangkan bayangan
Yang tersisa hanyalah memanggil animasi di mana kita ingin cahayanya berkedip. Dalam kasus khusus ini, mari tambahkan saja ke elemen .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }3. Memiliki satu bagian dari seluruh kedipan tanda terasa sedikit lebih realistis daripada jika kita menerapkan kedipan ke semua teks
h1 { animation: flicker 1.5s infinite alternate; }Perhatikan bahwa jika kami memang ingin seluruh tanda berkedip, maka secara teknis kami dapat menghapus nilai text-shadow: [x-offset] [y-offset] [blur-radius] [color];5 pada kelas .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }5, menambahkan animasi ke dalamnya, dan membiarkan text-shadow: [x-offset] [y-offset] [blur-radius] [color];9 menerapkan bayangan sebagai gantinya
CodePen Embed Fallback
Ini efek yang cukup keren, dan menambahkan lebih banyak realisme pada teks neon kita. Tentu saja, ada efek lain yang juga bisa Anda coba, yang juga akan dieksplorasi lebih lanjut dalam artikel ini. Misalnya, bagaimana dengan animasi yang lebih berdenyut atau kedipan yang lebih halus?
CodePen Embed Fallback
Mari jelajahi itu dan efek lainnya
Cahaya berdenyut
Kami baru saja mengintip ini. Ini menggunakan keyframes, seperti contoh sebelumnya, di mana kita menentukan ukuran radius blur di awal dan akhir animasi
Kami ingin ukuran radius blur menjadi terkecil di akhir animasi, jadi kami cukup mengurangi nilai radius blur untuk setiap nilai text-shadow: [x-offset] [y-offset] [blur-radius] [color];5 di keyframe .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }8. Dengan cara ini, ukuran keburaman berangsur-angsur naik turun, menciptakan efek berdenyut
@keyframes pulsate { 100% { /* Larger blur radius */ text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 0% { /* Smaller blur radius */ text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa; } }Sekali lagi, kami menambahkan animasi ke beberapa elemen. Kami akan pergi dengan .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }_3 lagi
h1 { animation: pulsate 2.5s infinite alternate; }Ini dia dengan semuanya disatukan
CodePen Embed Fallback
Kedipan halus
Kita dapat meredam sedikit dan membuat aksi berkedip menjadi sangat halus. Yang perlu kita lakukan adalah sedikit mengurangi ukuran radius keburaman di bingkai utama .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }8, hanya saja tidak sejauh yang terlihat pada contoh sebelumnya
@keyframes pulsate { 100% { /* Larger blur radius */ text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09; } 0% { /* A slightly smaller blur radius */ text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 0 38px #f09, 0 0 73px #f09, 0 0 80px #f09, 0 0 94px #f09, 0 0 140px #f09; } }Karena kedipan lebih halus dan pengurangan radius keburaman tidak terlalu besar, kita harus menambah frekuensi kemunculan animasi ini per detik untuk meniru kedipan yang lebih sering. Ini dapat dilakukan dengan mengurangi durasi animasi, katakanlah hanya .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }1
h1 { animation: pulsate 0.11s ease-in-out infinite alternate; }CodePen Embed Fallback
Menggunakan gambar latar belakang
Akan sangat rapi jika tanda kami digantung di dinding, bukan di ruang kosong. Mari ambil gambar latar untuk itu, mungkin semacam tekstur batu bata dari Unsplash atau semacamnya
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_0CodePen Embed Fallback
Menambahkan perbatasan
Satu detail terakhir yang bisa kita tambahkan adalah semacam batas lingkaran atau persegi panjang di sekeliling tanda. Itu hanya cara yang bagus untuk membingkai teks dan membuatnya terlihat seperti tanda yang sebenarnya. Dengan menambahkan bayangan ke perbatasan, kita bisa memberikan efek neon yang sama dengan teks
Elemen apa pun yang menjadi wadah untuk teks itulah yang membutuhkan batas. Katakanlah kita hanya bekerja dengan elemen .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }3. Itulah yang membuat perbatasan. Kami memanggil properti steno .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }_3 untuk membuat batas putih solid di sekitar heading, ditambah sedikit padding untuk memberi teks ruang untuk bernapas
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_1Kita dapat membulatkan sudut perbatasan sedikit sehingga tidak terlalu tajam dengan menerapkan .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }4 pada heading. Anda dapat menggunakan nilai apa pun yang paling sesuai bagi Anda untuk mendapatkan kebulatan tepat yang Anda inginkan
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_2Bagian terakhir adalah cahaya. Sekarang, text-shadow: [x-offset] [y-offset] [blur-radius] [color];_5 tidak akan berfungsi untuk perbatasan di sini, tetapi tidak apa-apa karena itulah yang dirancang untuk dilakukan oleh properti .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }6. Sintaksnya sangat mirip, jadi kami bahkan dapat menarik persis apa yang kami miliki untuk text-shadow: [x-offset] [y-offset] [blur-radius] [color];5 dan mengubah nilainya sedikit
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_3Perhatikan bahwa .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, /* Green glow */ 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; }_8 kata kunci?
CodePen Embed Fallback
Bagaimana dengan aksesibilitas?
Jika pengguna memiliki preferensi untuk mengurangi gerakan, kami harus mengakomodasinya menggunakan kueri media @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; } }1. Ini memungkinkan kami untuk menghapus efek animasi kami untuk membuat teks kami lebih mudah diakses oleh mereka yang memiliki preferensi untuk mengurangi gerakan
Misalnya, kita dapat memodifikasi animasi flashing dari Pena di atas sehingga pengguna yang mengaktifkan @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; } }1 tidak melihat animasi. Ingatlah bahwa kita menerapkan efek kedipan pada elemen .neonText { color: #fff; text-shadow: /* White glow */ 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, }3 saja, jadi kita akan mematikan animasi untuk elemen ini
text-shadow: [x-offset] [y-offset] [blur-radius] [color];_4Sangatlah penting untuk memastikan bahwa preferensi pengguna terpenuhi, dan memanfaatkan kueri media ini adalah cara yang bagus untuk membuat efek lebih mudah diakses bagi mereka yang memiliki preferensi untuk mengurangi gerakan.
Kesimpulan
Semoga ini menunjukkan kepada Anda cara membuat teks neon keren untuk proyek Anda selanjutnya. Pastikan untuk bereksperimen dengan berbagai font, ukuran dan warna radius buram, dan jangan lupa untuk mencoba berbagai animasi juga — ada banyak kemungkinan di luar sana. Dan tambahkan komentar jika Anda telah membuat efek bayangan yang rapi yang ingin Anda bagikan. Terima kasih sudah membaca