Ideen zum Erstellen von Welleneffekten mit CSS

Zuvor habe ich mehrere Möglichkeiten vorgestellt, Welleneffekte mit reinem CSS zu erzielen. Es gibt zwei verwandte Artikel dazu:

Reines CSS, um einen Welleneffekt zu erzielen!

Verwenden Sie CSS, um eine coole Ladeanimation zu erzielen

Dieser Artikel stellt einen weiteren mit CSS erzielten Welleneffekt vor. Die Idee ist sehr interessant.

Beginnen wir mit der Realisierung der Fläche eines gekrümmten Dreiecks aus einem bestimmten Integral

Bevor wir uns mit dem Thema befassen, schauen wir uns Folgendes an. In der höheren Mathematik können wir bestimmte Integrale verwenden, um die Fläche der gekrümmten Seitenfigur einer quadratischen Funktion zu berechnen.

Wir können die Fläche unter der Kurve in n schmale und hohe Rechtecke unterteilen. Wenn n gegen unendlich geht, ist die Fläche aller Rechtecke gleich der Fläche der gekrümmten Figur.

Zwei einfache Diagramme aus „Warum können bestimmte Integrale zur Flächenberechnung verwendet werden?“ :

Wenn n gegen unendlich geht, ist die Fläche aller Rechtecke gleich der Fläche der gekrümmten Figur:

Mit dieser Idee können wir in CSS auch durch mehrere Divs eine gekrümmte Kante, also eine Wellenlinie simulieren.

Schritt 1. Schneiden Sie das Bild in mehrere Teile

Zunächst können wir einen übergeordneten Container mit 12 untergeordneten Divs darunter definieren:

<div Klasse="g-container">
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
  <div Klasse="g-item"></div>
</div>

Durch flex -Layout wird ein einfaches Layout erhalten, und jedes untergeordnete Element hat die gleiche Höhe:

.g-container {
    Breite: 200px;
    Höhe: 200px;
    Rand: 2px durchgezogen #fff;
    Anzeige: Flex;
    Elemente ausrichten: Flex-Ende;
}

.g-Artikel {
    Flex-Wachstum: 1;
    Höhe: 60px;
    Hintergrundfarbe: #fff;
}

Die Wirkung ist wie folgt:

Schritt 2. Lassen Sie jedes untergeordnete Element die Höhentransformationsanimation mit unterschiedlichen negativen Verzögerungen ausführen

Als Nächstes müssen wir mit einer einfachen Änderung dieses Diagramm animieren. Dies lässt sich durch Ändern der Höhe jedes untergeordneten Elements erreichen:

.g-Artikel {
    Flex-Wachstum: 1;
    Höhe: 60px;
    Hintergrundfarbe: #000;
    Animation: Höhenänderung, 1 s, unendlicher Wechsel zwischen Ein- und Aussteigen;
}

@keyframes HöheChange {
    aus {
        Höhe: 60px;
    }
    Zu {
        Höhe: 90px;
    }
}

Die Wirkung ist wie folgt:

Als nächstes müssen wir nur noch eine negative Verzögerung unterschiedlicher Zeit für die Animationssequenz jedes untergeordneten Elements festlegen, um einen vorläufigen Welleneffekt zu erzielen. Um den Arbeitsaufwand zu reduzieren, verwenden wir SASS, um dies zu erreichen:

$Anzahl: 12;
$Geschwindigkeit: 1s;

.g-Artikel {
    --f: #{$geschwindigkeit / -12};
    Flex-Wachstum: 1;
    Höhe: 60px;
    Hintergrundfarbe: #000;
    Animation: Höhenänderung $Geschwindigkeit, unendliches Ein- und Aussteigen, alternativ;
}

@für $i von 0 bis $count {
    .g-item:n-tes-Kind(#{$i + 1}) {
        Animationsverzögerung: calc(var(--f) * #{$i});
    }
}

@keyframes HöheChange {
    aus {
        Höhe: 60px;
    }
    Zu {
        Höhe: 90px;
    }
}

Auf diese Weise erhalten wir einen vorläufigen Welleneffekt:

Schritt 3. Aliasing beseitigen

Wie Sie sehen, weist die obige Wellenanimation einige gezackte Kanten auf. Als nächstes müssen wir diese gezackten Kanten so weit wie möglich beseitigen.

Methode 1: Erhöhen Sie die Anzahl der Divs

Gemäß der Idee, zu Beginn ein bestimmtes Integral zu verwenden, um den Bereich der gekrümmten Kantenfigur zu ermitteln, müssen wir nur die Anzahl der Unterteilungen so weit wie möglich erhöhen. Wenn die Anzahl der Unterteilungen unendlich ist, verschwinden die gezackten Kanten.

Wir können versuchen, die oben genannten 12 untergeordneten Divs durch 120 zu ersetzen. Es ist zu mühsam, 120 Divs einzeln zu schreiben. Hier verwenden wir die Pug-Vorlagen-Engine:

div.g-container
 -für(var i=0; i<120; i++)
    div.g-Artikel

Für den CSS-Code müssen Sie nur die Verzögerungszeit der Animation ändern. Die negative Verzögerung von 120 untergeordneten Divs wird innerhalb von 1 Sekunde gesteuert:

// 12 -- 120
$Anzahl: 120;
$Geschwindigkeit: 1s;

.g-Artikel {
    // Beachten Sie, dass sich nur dies geändert hat – f: #{$speed / -120};
    Flex-Wachstum: 1;
    Höhe: 60px;
    Hintergrundfarbe: #000;
    Animation: Höhenänderung $Geschwindigkeit, unendliches Ein- und Aussteigen, alternativ;
}

@für $i von 0 bis $count {
    .g-item:n-tes-Kind(#{$i + 1}) {
        Animationsverzögerung: calc(var(--f) * #{$i});
    }
}

Auf diese Weise erhalten wir eine glattere Kurve:

Methode 2: Radiant mit transform: skew() simulieren

Natürlich ist die Verwendung so vieler Divs in Wirklichkeit Verschwendung. Gibt es also eine andere Möglichkeit, Aliasing so weit wie möglich zu vermeiden, wenn die Anzahl der Divs relativ gering ist?

Hier können wir versuchen, den untergeordneten Elementen während der Bewegungstransformation eine andere transform: skewY() um den Bogen zu simulieren.

Lassen Sie uns den Code noch einmal ändern. Wir werden die Anzahl der Divs reduzieren und jedem untergeordneten Div einen Animationseffekt transform: skewY() hinzufügen:

div.g-container
 -für(var i=0; i<24; i++)
    div.g-Artikel

Der vollständige CSS-Code lautet wie folgt:

$Anzahl: 24;
$Geschwindigkeit: 1s;

.g-Artikel {
    // Beachten Sie, dass sich nur dies geändert hat – f: #{$speed / -24};
    Flex-Wachstum: 1;
    Höhe: 60px;
    Hintergrundfarbe: #000;
    Animation: 
        heightChange $speed unendlich ease-in-out alternierend,
        skewChange $speed unendlicher Easy-In-Out-Alternative;
}

@für $i von 0 bis $count {
    .g-item:n-tes-Kind(#{$i + 1}) {
        Animationsverzögerung: 
            berechnet(var(--f) * #{$i}), 
            berechnet(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes Höhe ändern {
    aus {
        Höhe: var(--h);
    }
    Zu {
        Höhe: berechnet (var (--h) + 30px);
    }
}

@keyframes skewChange {
    aus {
        transformieren: skewY(20 Grad);
    }
    Zu {
        transformieren: skewY(-20 Grad);
    }
}

Um es leichter verständlich zu machen, schauen wir uns zunächst an, wie das untergeordnete Div mit hinzugefügtem skewY() transformiert wird, wenn die Animation der Höhentransformation konsistent ist:

Sie können sehen, dass jede Transformation deutlich gezackte Kanten aufweist. Durch Hinzufügen der verzögerten Höhentransformation können die meisten gezackten Kanten eliminiert werden:

An diesem Punkt haben wir eine weitere Methode erhalten, um Aliasing mit einer moderaten Anzahl von Divs zu beseitigen! Den vollständigen Code für alle oben genannten Effekte finden Sie hier:

CodePen – PureCSS Welleneffekte

Gemischte Nutzung

Schließlich können wir mehrere unterschiedliche Welleneffekte miteinander kombinieren, indem wir mehrere variable Parameter anpassen, um einige kombinierte Effekte zu erzielen, was auch sehr gut ist.

Etwa so:

CodePen – PureCSS Welleneffekte 2

In diesem Zusammenhang fällt mir das Logo der Muttergesellschaft unseres Unternehmens (Shopee), Sea Group, ein, das so aussieht:

Mit der Lösung in diesem Artikel können wir eine dynamische LOGO-Animation dafür implementieren:

CodePen-Demo – PureCSS Wave – Sea Group-Logo

Mangel

Die Nachteile dieser Lösung liegen dennoch auf der Hand:

Zunächst einmal ist es ein nutzloses Div. Um den Effekt zu erzielen, sind mehr Divs erforderlich, und je mehr Divs vorhanden sind, desto besser ist der Effekt. Wenn es jedoch ein gewisses Maß erreicht, ist eine Verzögerung unvermeidlich und gezackte Kanten können nicht vollständig beseitigt werden. Dies ist das Verhängnisvollste oder der Ort, an dem es wirklich nützlich sein kann.

Natürlich besteht der Zweck dieses Artikels darin, Ihren Horizont zu erweitern, die Vor- und Nachteile dieser Methode zu erkunden, den gesamten Prozess der Animation zu verstehen und die negative Verzögerungszeit der Animation zu nutzen. All dies hat eine gewisse Referenz- und Lernbedeutung. CSS ist immer noch sehr interessant~ 🤣

endlich

Nun, dieser Artikel endet hier, ich hoffe, er hilft Ihnen 😃

Dies ist das Ende dieses Artikels über die Ideen zur Verwendung von CSS zum Erstellen von Welleneffekten. Weitere relevante Inhalte zur Verwendung von CSS zum Erstellen von Wellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!