✨ Effet de piste de curseur néon interactif ✨ Code-js tutoriel-php.cn

✨ Effet de piste de curseur néon interactif ✨ Code

DDD

Libérer： 2024-12-05 06:46:10

original

1017 Les gens l'ont consulté

✨ Interactive Neon Cursor Trail Effect ✨ Code

SUIVEZ-NOUS SUR INSTAGRAM : https://www.instagram.com/webstreet_code/

CODE

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curseur néon du codeur</title>
  <style>
    * {
      marge : 0 ;
      remplissage : 0 ;
      dimensionnement de la boîte : bordure-boîte ;
    }

    corps {
      hauteur : 100vh ;
      affichage : flexible ;
      justifier-contenu : centre ;
      align-items : centre ;
      arrière-plan : #0d1117 ; /* Fond sombre pour l'ambiance de codage */
      couleur : blanc ;
      famille de polices : 'Courier New', monospace ; /* Police à espacement fixe pour une sensation de codeur */
      débordement : caché ;
      curseur : aucun ; /* Masquer le curseur par défaut */
      transition : facilité d'arrière-plan 0,5 s ;
    }

    /* Style de curseur personnalisé */
    .curseur {
      position : absolue ;
      largeur : 20 px ;
      hauteur : 20px ;
      rayon de bordure : 50 % ;
      couleur d'arrière-plan : #ffffff ;
      box-shadow : 0 0 10px rgba (255, 255, 255, 0,8); /* Effet de lueur néon */
      événements de pointeur : aucun ;
      transformer : traduire (-50 %, -50 %);
      transition : toutes les 0,1 s sont faciles ;
    }

    /* Trace de néon derrière le curseur */
    .neon-trail {
      position : absolue ;
      largeur : 5px ;
      hauteur : 5px ;
      rayon de bordure : 50 % ;
      événements de pointeur : aucun ;
      transformation-origine : centre ;
      animation : trailEffect 1,5 s en douceur vers l'avant ;
    }
    /* Animation d'extension du sentier */
    @keyframes trailEffect {
      0% {
        transformation : échelle(1);
        opacité : 1 ;
      }
      100 % {
        transformation : échelle (10 );
        opacité : 0 ;
      }
    }
    /* Effet de bordure claire pour la page */
    .page-border {
      position : absolue ;
      haut : 0 ;
      gauche : 0 ;
      à droite : 0 ;
      bas : 0 ;
      bordure : 2px solide #ffffff ;
      événements de pointeur : aucun ;
      ombre de la boîte : 0 0 15px rgba(255, 255, 255, 0,7) ;
    }

  </style>
&Lt;/tête>
<corps>

  <!-- Bordure personnalisée autour de la page -->
  <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!