Neon-Glow-Effekt
Text mit einem „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.
Neon-Effekt
CSS-Klasse „.neon“ (rot)
Neon-Effekt
CSS-Klasse „.neon2“ (blau)
Style Rot CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |