cari

Rumah >hujung hadapan web >tutorial js >✨ Kesan Jejak Kursor Neon Interaktif ✨ Kod

✨ Kesan Jejak Kursor Neon Interaktif ✨ Kod

DDD
DDDasal
2024-12-05 06:46:101020semak imbas

✨ Interactive Neon Cursor Trail Effect ✨ Code

IKUTI KAMI DI INSTAGRAM: https://www.instagram.com/webstreet_code/

KOD 

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kursor Neon Pengekod</title>
  <gaya>
    * {
      margin: 0;
      padding: 0;
      saiz kotak: kotak sempadan;
    }

    badan {
      ketinggian: 100vh;
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      latar belakang: #0d1117; /* Latar belakang gelap untuk getaran pengekodan */
      warna: putih;
      font-family: 'Courier New', monospace; /* Fon monospace untuk rasa pengekod */
      limpahan: tersembunyi;
      kursor: tiada; /* Sembunyikan kursor lalai */
      peralihan: latar belakang 0.5s mudah;
    }

    /* Gaya kursor tersuai */
    .kursor {
      jawatan: mutlak;
      lebar: 20px;
      ketinggian: 20px;
      jejari sempadan: 50%;
      warna latar belakang: #ffffff;
      bayang-kotak: 0 0 10px rgba(255, 255, 255, 0.8); /* Kesan cahaya neon */
      pointer-events: tiada;
      mengubah: terjemah(-50%, -50%);
      peralihan: semua 0.1s mudah;
    }

    /* Jejak neon di belakang kursor */
    .neon-trail {
      jawatan: mutlak;
      lebar: 5px;
      ketinggian: 5px;
      jejari sempadan: 50%;
      pointer-events: tiada;
      transform-asal: pusat;
      animasi: trailEffect 1.5s mudah keluar ke hadapan;
    }
    /* Animasi pengembangan jejak */
    @keyframes trailEffect {
      0% {
        transform: skala (1);
        kelegapan: 1;
      }
      100% {
        transform: skala(10);
        kelegapan: 0;
      }
    }
    /* Kesan sempadan cahaya untuk halaman */
    .halaman-sempadan {
      jawatan: mutlak;
      atas: 0;
      kiri: 0;
      kanan: 0;
      bawah: 0;
      sempadan: 2px pepejal #ffffff;
      pointer-events: tiada;
      bayang-kotak: 0 0 15px rgba(255, 255, 255, 0.7);
    }

  </style>
</head>
<badan>

  <!-- Jidar tersuai di sekeliling halaman -->
  <div>

Atas ialah kandungan terperinci ✨ Kesan Jejak Kursor Neon Interaktif ✨ Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html for pointer default display position overflow margin padding border viewport background transform transition animation flex https Translate
Kenyataan：
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
Artikel sebelumnya：Bagaimanakah Saya Boleh Menambah Tarikh Sehari dalam JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Menambah Tarikh Sehari dalam JavaScript?

Artikel berkaitan

Lihat lagi