CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten

CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten

Umsetzungsideen:

Verwenden Sie text-shadow in CSS, um den leuchtenden Effekt von Text zu erzielen

Effektbild:

Der Code lautet wie folgt:

</Kopf>
  <Stil>
    Körper{
      Hintergrundfarbe: #000;
    }
    .textArea{
      Schriftgröße: 100px;
      Farbe: #fff;
      Textschatten: 0 0 5px #e0ea33,
           0 0 15px #e0ea33,
           0 0 25px #e0ea33;
      Rand oben: 200px;
      Textausrichtung: zentriert;
    }
  </Stil>
<Text>
  <p class="textArea">帅</p><!--Textinhalt hier-->
 </body>
<Skript>
  var text = document.querySelector ('.textArea'); //Holen Sie sich unser P-Tag //Auslösen, wenn der Mauszeiger das P-Tag betritt text.onmouseenter = function () {
  text.innerHTML = 'Ich bin dein Vater'; //Setze das HTML zwischen den P-Tags
  };
  //Auslösen, wenn der Mauszeiger das P-Tag verlässt text.onmouseleave=function(){
  text.innerHTML = 'cool'; //HTML zwischen P-Tags festlegen
  };
</Skript>

Zusammenfassen

Oben sehen Sie die CSS-Implementierung von leuchtendem Text und ein paar JS-Spezialeffekten, die vom Editor eingeführt wurden. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten!

<<:  Die Neugestaltung einer Website ist für jede Familie eine schwierige Aufgabe

>>:  Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Artikel empfehlen

Eine kurze Analyse zum Festlegen des Anfangswerts des Linux-Roots

Ubuntu erlaubt standardmäßig keine Root-Anmeldung...

Mehrere allgemeine Beispielcodes für Weiterleitungsverbindungen in HTML

Code kopieren Der Code lautet wie folgt: window.l...

MySQL 5.7.20 Zip-Installations-Tutorial

MySQL 5.7.20 Zip-Installation, der spezifische In...

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Inhaltsverzeichnis Vue+ElementUI-Hintergrundverwa...

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

rm-Befehl Der Befehl rm wird von den meisten Benu...

Ein wenig bekanntes JS-Problem: [] == ![] ist wahr, aber {} == !{} ist falsch

konsole.log( [] == ![] ) // wahr console.log( {} ...

Beispiel für die Implementierung der Hochverfügbarkeit von Keepalived+Nginx

1. Einführung in Keepalived Keepalived wurde ursp...

So implementiert Webpack das Caching statischer Ressourcen

Inhaltsverzeichnis Einführung Unterscheiden Sie z...

Detaillierte Erklärung der Verwendung des Fuser-Befehls in Linux

beschreiben: fuser kann anzeigen, welches Program...

So konfigurieren Sie nginx+php+mysql in Docker

Verstehen Sie zunächst eine Methode: Aufrufen ein...

Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester

Meine Empfehlung Lösung für die Koexistenz mehrer...