Heim > Artikel > Web-Frontend > Erstellen Sie eine Neontextanzeige mit HTML und CSS
Erstellen Sie eine Neontextanzeige mit HTML und CSS
- WBOYnach vorne
- 2023-09-03 09:25:06991Durchsuche
Heutzutage ist das Erstellen von Neontext auf Webseiten zu einem Trend geworden, um sie attraktiver zu machen. Wir können Neontext auf Webseiten erstellen, um einen auffälligen Effekt zu erzielen, der die Aufmerksamkeit der Benutzer auf die wichtigen Informationen lenkt, die die Webseite enthält.
Wir können sie durch Neontext mit Logos, Schlagzeilen, Anzeigen und mehr hervorheben. In diesem Tutorial passen wir den Wert der CSS-Eigenschaft text-shadow an, um Neontext zu erstellen.
Grammatik
Benutzer können Neontext mit HTML und CSS erstellen, indem sie der folgenden Syntax folgen.
text-shadow: 0 0 1.5rem white;
Wir haben die CSS-Eigenschaft „text-shadow“ in der obigen Syntax verwendet, um einen Leuchteffekt hinzuzufügen. Als ersten Wert wird der horizontale Versatz, als zweiter Wert der vertikale Versatz, als dritter Wert der Unschärferadius und als vierter Wert die Farbe angenommen.
Wir müssen den vertikalen und horizontalen Versatz immer auf 0 setzen. Um den Neoneffekt zu erzeugen, müssen wir mehrere Werte mit unterschiedlichen Farben und Unschärferadius für die CSS-Eigenschaft text-shadow verwenden.
Beispiel 1 (Einfacher Neontext)
Im folgenden Beispiel haben wir mithilfe der CSS-Eigenschaft „text-shadow“ einen einfachen Neoneffekt für Text erstellt. Wir verwenden mehrere Werte mit unterschiedlichen Randradien und Farben, um den Neoneffekt zu erzeugen.
In der Ausgabe können Benutzer Text mit Neoneffekt beobachten.
<html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html><html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html>
Beispiel 2 (Regenbogen-Neontext)
Im folgenden Beispiel haben wir einen Regenbogen-Neoneffekt im Text erstellt. Hier haben wir Text innerhalb eines div-Elements hinzugefügt.
Wir verwenden die CSS-Eigenschaft „background-image“ in CSS, um einen linearen Farbverlauf als Hintergrund hinzuzufügen. Wir haben einen linearen Farbverlauf aus 4 verschiedenen Farben im 45-Grad-Winkel aufgetragen. Zusätzlich schneiden wir das Hintergrundbild mithilfe der CSS-Eigenschaft „-webkit-background-clip“ in eine Textform aus.
Zusätzlich verwenden wir die CSS-Eigenschaft „-webkit-text-fill-color“, um den Text mit einer transparenten Farbe zu füllen. Es wird also mit der gleichen Farbe wie der Hintergrund gefüllt. Zusätzlich haben wir die animierte CSS-Eigenschaft mit „rainbow-keyframe“-Keyframes verwendet. In den Keyframes ändern wir den Grad der Farbtonrotation, um die Farbtöne im Hintergrund zu drehen.
In der Ausgabe können Benutzer den Regenbogeneffekt im Text beobachten.
<html>
<head>
<style>
.rainbow-neon {
font-size: 5rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-keyframe 3s linear infinite;
}
@keyframes rainbow-keyframe {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h2> Creating the <i> rainbow Neon text </i> using the CSS </h2>
<div class="rainbow-neon"> It's raining actually. </div>
</body>
</html>
Beispiel 3 (Blinkender Neontext)
Im folgenden Beispiel haben wir blinkenden Neontext erstellt. Hier verwenden wir die CSS-Eigenschaft „text-shadow“, um dem Text einen Neoneffekt hinzuzufügen. Zusätzlich verwenden wir das Attribut „animation“, um eine Blinkanimation hinzuzufügen. Im Keyframe „blink“ ändern wir den Wert der Eigenschaft „text-shadow“.
In der Ausgabe sehen wir den blinkenden Text mit Leuchteffekt.
<html>
<head>
<style>
.flicker {
font-size: 4rem;
color: blue;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
color: #fff;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%
{ text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
1%, 6%, 11%, 16%, 21%, 26%, 31%, 36%, 41%, 46%, 51%, 56%, 61%, 66%, 71%, 76%, 81%, 86%, 91%, 96%
{
text-shadow: none;
}
}
</style>
</head>
<body>
<h2> Creating the <i> flickering Neon text </i> using the CSS. </h2>
<div class = "flicker"> This text is flickering. </div>
</body>
</html>
Beispiel 4 (Neontext mit Farbverlauf)
Im folgenden Beispiel fügen wir dem Text einen Farbverlauf hinzu. Wir wenden den Farbverlauf mithilfe der Eigenschaft „Hintergrundbild“ auf den Text an.
In der Ausgabe können Benutzer die Textfarbe mit Farbverlauf beobachten. Darüber hinaus können Benutzer die Farbe des Farbverlaufs ändern, indem sie unterschiedliche Farbwerte an das Funktionsargument Linear-gradient() übergeben.
<html>
<head>
<style>
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2> Creating the <i> Gradient Neon text </i> using the CSS. </h2>
<div class = "gradient"> Check gradient in Neon text </div>
</body>
</html>
Der Benutzer hat gelernt, Neontext nur mit HTML und CSS zu erstellen. Wir haben gelernt, aus einfachem Neontext fortgeschrittenen Neontext mit Animationen wie Regenbogeneffekten und Blinkeffekten zu erstellen.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Neontextanzeige mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!