✨ Interaktiver Neon-Cursor-Trail-Effekt ✨ Code-js-Tutorial-php.cn

✨ Interaktiver Neon-Cursor-Trail-Effekt ✨ Code

DDD

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

Original

1024 Leute haben es durchsucht

✨ Interactive Neon Cursor Trail Effect ✨ Code

FOLGEN SIE UNS AUF INSTAGRAM: https://www.instagram.com/webstreet_code/

CODE

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coder's Neon Cursor</title>
  <Stil>
    * {
      Rand: 0;
      Polsterung: 0;
      Boxgröße: border-box;
    }

    Körper {
      Höhe: 100 Vh;
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Hintergrund: #0d1117; /* Dunkler Hintergrund für Coding-Vibe */
      Farbe: weiß;
      Schriftfamilie: „Courier New“, Monospace; /* Monospaced-Schriftart für ein besseres Programmiergefühl */
      Überlauf: versteckt;
      Cursor: keiner; /* Standardcursor ausblenden */
      Übergang: Hintergrund 0,5 s Leichtigkeit;
    }

    /* Benutzerdefinierter Cursorstil */
    .cursor {
      Position: absolut;
      Breite: 20px;
      Höhe: 20px;
      Randradius: 50 %;
      Hintergrundfarbe: #ffffff;
      Box-Shadow: 0 0 10px rgba(255, 255, 255, 0,8); /* Neon-Glüheffekt */
      Zeigerereignisse: keine;
      transform: Translate(-50%, -50%);
      Übergang: alle 0,1 s Leichtigkeit;
    }

    /* Neonspur hinter dem Cursor */
    .neon-trail {
      Position: absolut;
      Breite: 5px;
      Höhe: 5px;
      Randradius: 50 %;
      Zeigerereignisse: keine;
      Transformationsursprung: Mitte;
      Animation: TrailEffect 1,5 s Ease-Out vorwärts;
    }
    /* Trail-Erweiterungsanimation */
    @keyframes TrailEffect {
      0 % {
        transform: Skala(1);
        Deckkraft: 1;
      }
      100 % {
        transformieren: Skala(10);
        Deckkraft: 0;
      }
    }
    /* Heller Randeffekt für die Seite */
    .page-border {
      Position: absolut;
      oben: 0;
      links: 0;
      rechts: 0;
      unten: 0;
      Rand: 2px fest #ffffff;
      Zeigerereignisse: keine;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0,7);
    }

  </style>
</head>
<Körper>

  <!-- Benutzerdefinierter Rahmen um die Seite -->
  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt von✨ Interaktiver Neon-Cursor-Trail-Effekt ✨ Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!