WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Einen Text mit einer Wasseranimation verschönern

von | Mai 8, 2023 | Font / Schrift | 0 Kommentare

Schlagwörter: CSS - CSS3 - fff - HTML

Heute möchte ich euch mal zeigen wie ihr eine Schrift auch mal anders animieren könnt. Anstatt das ihr nur die Farben oder Grösse einer Schrift verändert, lernt ihr heute wie ihr auch die Farbe selbst animieren könnt. Diesmal verwenden wir dafür ne Art Maske wie in der Videobearbeitung und somit kann man noch spannendere farbliche Anpassungen durchführen.

Video

HTML

1
2
3
4
<div class="text">
        <span>Eric-Oliver Mächler</span>
        <span>Eric-Oliver Mächler</span>
      </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.text span {
        position: absolute;
        color: #a81010;
        font-size: 4rem;
        transform: translate(-50%, -50%);
      }
      .text span:nth-child(1) {
        color: #a81010;
      }
      .text span:nth-child(2) {
        color: #fff;
        -webkit-text-stroke: 1px #fff;
        animation: anima 3s ease-in-out infinite;
      }

Denkt daran wenn ihr die Keyframe animation austauschen möchtet, müsst ihr den Titel ändern von anima auf kreis oder zurück

Keyframes

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
@keyframes anima {
        0%,
        100% {
          clip-path: polygon(
            0% 45%,
            15% 44%,
            32% 50%,
            54% 60%,
            70% 61%,
            84% 59%,
            100% 52%,
            100% 100%,
            0% 100%
          );
        }
        50% {
          clip-path: polygon(
            0% 60%,
            16% 65%,
            34% 66%,
            51% 62%,
            67% 50%,
            84% 54%,
            100% 46%,
            100% 100%,
            0% 100%
          );
        }
      }
 
      @keyframes kreis {
        0%,
        100% {
          clip-path: ellipse(50% 10% at 50% 50%);
        }
        50% {
          clip-path: ellipse(50% 28% at 50% 50%);
        }
      }




0 Kommentare

Einen Kommentar abschicken

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