Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie CSS3, um einen internen Leuchteffekt für die Schriftart zu erzielen (ausführliche Erklärung)
So verwenden Sie CSS3, um einen internen Leuchteffekt für die Schriftart zu erzielen (ausführliche Erklärung)
- 坏嘻嘻Original
- 2018-09-28 10:54:117415Durchsuche
In der heutigen Gesellschaft, in der sich das Internet von Tag zu Tag weiterentwickelt, stellen die Menschen immer höhere Anforderungen an die Web-Benutzererfahrung, was zu mehr Derivaten von Spezialeffekten wie Schatteneffekten, Leuchteffekten usw. geführt hat. Dieser Artikel Ich werde sie Ihnen vorstellen, wie Sie CSS3 verwenden, um den besonderen Effekt der Schriftbeleuchtung zu erzielen. Freunde in Not können sich darauf beziehen.
Verwenden von CSS3, um das Prinzip des Font-Glow-Effekts zu erreichen
Zuerst müssen wir den Text eingeben, der benötigt wird mit Spezialeffekten ergänzt werden.
-
Dann müssen wir verstehen, dass es in CSS3 selbst kein Lichteffektattribut gibt, aber wir können den Lichteffekt über das Textschattenattribut erreichen, also konzentrieren wir uns jetzt darauf das text-shadow-Attribut.
Grundlegende Syntax des Textschattenattributs: Textschatten: h-Schatten v-Schattenunschärfefarbe;
h-Schatten: horizontale Schattenposition (Schatten horizontaler Versatz), der negativ sein kann. V-Schatten: Die Position des vertikalen Schattens (der vertikale Versatz des Schattens), der ein negativer Wert sein kann.
Unschärfe: Abstand der Schattenunschärfe (Standard ist 0).
Farbe: Schattenfarbe, standardmäßig wird die Schriftfarbe verwendet.
Darüber hinaus können wir auch eine weitere Funktion von text-shadow nutzen: mehrere Schatten gleichzeitig setzen (verwenden Sie Kommas, um mehrere Schatten zu trennen). Diese Funktion wird vorerst nicht allzu oft eingeführt.
Ein Beispiel für die Verwendung von CSS3, um einen Schriftleuchteffekt zu erzielen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发光字体</title>
<style type="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all 0.1s;
text-shadow:1px 1px 1px #00FF00;}
p:hover{ text-shadow:6px 6px 6px #00FF00;}
</style>
</head>
<body><p align="center">PHP中文网</p>
</body>
</html>Die Schrift leuchtet Der Effekt ist wie in der Bildshow gezeigt
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um einen internen Leuchteffekt für die Schriftart zu erzielen (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!