Cara menggunakan animasi pulsa bayangan css

Question

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

Table of Contents Show

Menambahkan efek cahaya ke teks
Efek "berkedip".
Cahaya berdenyut
Kedipan halus
Menggunakan gambar latar belakang
Menambahkan perbatasan
Bagaimana dengan aksesibilitas?

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 rapi 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 masing-masing mewakili posisi horizontal dan vertikal bayangan. 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 blur. 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];

0

CodePen 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];

_1

Kita 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];

_2

Bagian 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 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];

_3

Perhatikan 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];

_4

Sangatlah 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 berikutnya. 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

kode css