Glühende Neon Laufschrift mit CSS

von | Feb 14, 2020 | Allgemein, Mein Youtube Kanal | 0 Kommentare

Schlagwörter: CSS

Heute möchte ich euch eine echt einfach aber ziemlich geile Laufschrift zeigen, die im Dunkeln aussieht als sei es so eine NEON Laufschrift einer Werbeanzeige.

Diese Laufschrift ist sehr einfach selbst coden und hinterlässt doch einen echt guten Eindruck.

Video Anleitung

Quellcode

Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂

Der HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
<div class="textcontainer">
    <span> W</span>
    <span> I</span>
    <span> L</span>
    <span> L</span>
    <span> K</span>
    <span> O</span>
    <span> M</span>
    <span> M</span>
    <span> E</span>
    <span> N</span>
    </div>

Der CSS Code

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
        body {
            background: #000;
            color: #111;;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            height: 50vh;
        }  
        span {
            animation: glow 3s ease-in-out infinite;
        }
 
@keyframes glow {
0%, 100% {
    color: #fff;
    text-shadow: 0 0 10px #0652dd,
            0 0 50px #0652dd,
            0 0 100px #0652dd;
            }
    10%, 90% {
        color: #111;
        text-shadow: none;
    }
        }
 
        span:nth-child(2){
            animation-delay: 0.25s;
        }
        span:nth-child(3){
            animation-delay: 0.50s;
        }
        span:nth-child(4){
            animation-delay: 0.75s;
        }
        span:nth-child(5){
            animation-delay: 1s;
        }
        span:nth-child(6){
            animation-delay: 1.25s;
        }
        span:nth-child(7 ){
            animation-delay: 1.50s;
        }
        span:nth-child(8 ){
            animation-delay: 1.75s;
        }
        span:nth-child(9 ){
            animation-delay: 2s;
        }
        span:nth-child(10 ){
            animation-delay: 2.25s;
        }

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert