✨ Kesan Jejak Kursor Neon Interaktif ✨ Kod-tutorial js-php.cn

✨ Kesan Jejak Kursor Neon Interaktif ✨ Kod

DDD

Lepaskan： 2024-12-05 06:46:10

asal

1031 orang telah melayarinya

✨ 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>

Salin selepas log masuk

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