Einen Text mit einer Wasseranimation verschönern

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

<div class="text">
        <span>Eric-Oliver Mächler</span>
        <span>Eric-Oliver Mächler</span>
      </div>

CSS

.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

@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%);
        }
      }