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

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

In diesem Artikel wird der spezifische Code von V...

Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte

Das, was ich vorher geschrieben habe, ist zu komp...

12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert

Wenn die DataSource-Eigenschaft eines DataGrid-Ste...

WeChat Mini-Programm implementiert den Likes-Dienst

In diesem Artikel wird der spezifische Code für d...

Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können

Frage Lassen Sie mich zunächst über das Problem s...

Spezifische Verwendung von useRef in React

Ich glaube, dass Leute, die Erfahrung mit React h...

18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie

Designer müssen Psychologie verstehen, indem sie ...

Verwendung des Linux-Befehls passwd

1. Befehlseinführung Mit dem Befehl passwd werden...

So passen Sie CSS an den Vollbildmodus des iPhone an

1. Medienabfragemethode /*iPhone X-Anpassung*/ @m...

MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen

In MySQL können Sie die SQL-Anweisung „rename tab...