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

CUDA8.0 und CUDA9.0 koexistieren unter Ubuntu16.04

Vorwort Einige der früheren Codes auf Github erfo...

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

1. Umsetzungsideen Der Zweck der Schnittstellensi...

Detailliertes Tutorial zur Installation von Mysql5.7.19 auf Centos7 unter Linux

1. MySQL herunterladen URL: https://dev.mysql.com...

Einführung in den Aufbau von NFS-Diensten unter Centos7

Inhaltsverzeichnis 1. Server 2. Kunde 3. Testdien...

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7

1. Herunterladen Laden Sie mysql-5.7.19-linux-gli...

Tutorial-Analyse der Schnellinstallation von mysql5.7 basierend auf centos7

eins. wget https://dev.mysql.com/get/mysql57-comm...

Tutorial zur Installation von MySQL 8.0.11 mit RPM unter Linux (CentOS7)

Inhaltsverzeichnis 1. Installationsvorbereitung 1...

Rastersysteme im Webdesign

Bildung des Gittersystems Im Jahr 1692 war der fr...

Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht

Nach dem Einrichten des MySQL-Master-Slaves wisse...