suchen

Heim >Web-Frontend >js-Tutorial >✨ Interaktiver Neon-Cursor-Trail-Effekt ✨ Code

✨ Interaktiver Neon-Cursor-Trail-Effekt ✨ Code

DDD
DDDOriginal
2024-12-05 06:46:101048Durchsuche

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

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!

html for pointer default display position overflow margin padding border viewport background transform transition animation flex https Translate
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich ein Datum in JavaScript um einen Tag erhöhen?Nächster Artikel：Wie kann ich ein Datum in JavaScript um einen Tag erhöhen?

In Verbindung stehende Artikel

Mehr sehen