Einen Text – Wechsler mit CSS erstellen

von | Okt 24, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

Inhaltsverzeichnis

Bei der Programmierung einer Webseite will man hin und wieder den Fokus auf ein Element legen, dafür kann man entweder Farben, Formen oder so wählen oder halt auch mal einen coolen Effekt. Heute zeige ich euch wie ihr so einen coolen Text Wechseler Effekt erzielen könnt.

Also stellt euch vor ihr habt einen Text wie “Ich will heute xxx essen” und das xxx wird regelmässig ausgetauscht. Sowas bauen wir heute

Video

HTML

Zuerst definiere ich mit HTML den Text und welche Wörter ausgetauscht werden sollen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
        Ich will heute
        <div id="flip">
            <div>
                <div>Fleisch</div>
            </div>
            <div>
                <div>Gemüse</div>
            </div>
            <div>
                <div>Kinder</div>
            </div>
        </div>
        essen
    </div>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.container {
    color: #999;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    padding-top: 200px;
    position: fixed;
    width: 100%;
    bottom: 45%;
    display: block;
}
 
#flip {
    height: 50px;
    overflow: hidden;
}
 
#flip>div>div {
    color: #fff;
    padding: 4px 12px;
    height: 45px;
    margin-bottom: 45px;
    display: inline-block;
}
 
#flip div div {
    background: #45c58a;
}
 
#flip div:first-child div {
    background: #4ec7f3;
}
 
#flip div:last-child div {
    background: #DC143C;
}
 
 
 
#flip div:first-child {
    animation: wechsel 5s linear infinite;
}

Hier noch die Keyframes Animation

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
@keyframes wechsel {
    0% {
        margin-top: -270px;
    }
 
    5% {
        margin-top: -180px;
    }
 
    33% {
        margin-top: -180px;
    }
 
    38% {
        margin-top: -90px;
    }
 
    66% {
        margin-top: -90px;
    }
 
    71% {
        margin-top: 0px;
    }
 
    99.99% {
        margin-top: 0px;
    }
 
    100% {
        margin-top: -270px;
    }
 
}

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