Neon-Glow-Effekt
Text mit Hover Neon-Effekt erstellen
- Gewünschten Style-Code aus dem unteren Bereich kopieren
- Erstelle eine neue Seite
- Mit dem “Text-Modul” einen Text einfügen
- Im Text-Modul unter Erweitert die CSS-Klasse: “neon” einfügen
- Erstellst ein “Code-Modul” und fülle dieses mit dem zuvor kopierten Style-Code
- Speichere die Seite und schau dir Dein Werk an 😉
Wenn Du weitere Texte mit einer anderen Farbe in der selbe Seite zum Glühen bringen möchtest, musst Du ein weiteres “Code-Module” einfügen (oder kopieren) und die CSS-Klasse ändern, wie z.B. aus “neon” wird “neon2”.
Im neuen Code-Modul kannst Du dann die Farbe nach deinen Wünschen ändern.
Viel Spaß!
Neon-Effekt
Neon-Effekt
Style Rot
<style>
.neon p {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.neon p:hover {
-webkit-animation: neon 1.5s ease-in-out infinite alternate;
-moz-animation: neon 1.5s ease-in-out infinite alternate;
animation: neon 1.5s ease-in-out infinite alternate;
}
.neon p:hover {
color: #ffffff;
}
@-webkit-keyframes neon {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
to {
text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #FF1177, 0 0 18px #FF1177, 0 0 20px #FF1177, 0 0 25px #FF1177, 0 0 37px #FF1177;
}
}
</style>Style Blau
<style>
.neon2 p {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.neon2 p:hover {
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
-moz-animation: neon2 1.5s ease-in-out infinite alternate;
animation: neon2 1.5s ease-in-out infinite alternate;
}
.neon2 p:hover {
color: #ffffff;
}
@-webkit-keyframes neon2 {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #042eff, 0 0 35px #042eff, 0 0 40px #042eff, 0 0 50px #042eff, 0 0 75px #042eff;
}
to {
text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #042eff, 0 0 18px #042eff, 0 0 20px #042eff, 0 0 25px #042eff, 0 0 37px #042eff;
}
}
</style>