Wie ich mit CSS-Masken eine stimmungsvolle Animation erstellt habe

Ursprünglicher Autor: Ankit Karnany
  • Übersetzung
Erinnern Sie sich an die Cartoons, die wir in der Kindheit gesehen haben? Zu dieser Zeit waren sie die Personifizierung der Animation. Animation ist jetzt nicht nur ein Zeichentrickfilm, wir treffen ihn fast täglich, überprüfen das Telefon oder verwenden ein Gerät, das über einen Bildschirm verfügt.

Heutzutage werden Animationen nicht nur dazu verwendet, Aufmerksamkeit zu erregen, sondern auch um die Benutzerinteraktion zu verbessern und die Navigation zu erleichtern. Bei jedem guten Design wird die Animation so hinzugefügt, dass sie mit dem allgemeinen Konzept kombiniert wird, wodurch eine komfortable Benutzeroberfläche entsteht. In diesem Artikel erstellen wir eine einfache Animation des Gesichts mit unterschiedlichen Ausdrücken. Dabei werden wir ein wenig über CSS lernen.





Lass uns anfangen


Wir werden die CSS-Technik verwenden, die selten von Webentwicklern verwendet wird, auf die Designer jedoch häufig zurückgreifen. Es wird Maskierung genannt.

Was fällt Ihnen ein, wenn Sie die Worte "Maske" hören? Wahrscheinlich haben Sie etwas präsentiert, das die Essenz verbirgt. Das ist alles was wir wissen müssen.

Warten Sie, aber in diesem Artikel geht es um das Schreiben und Verwenden von CSS-Animationen. Alles klar

Erstellen einer Basismaske


Nehmen wir an, wir haben ein Tag divmit background: green;und es sieht so aus:



Außerdem gibt es eine Datei face.svg:



Wenn wir die CSS-Eigenschaft mask-image: url (face.svg);auf das Tag anwenden div, werden Sie das Ergebnis



erstaunen. Das face.svg-Bild wurde oben platziert div, nahm jedoch die Hintergrundfarbe an. Dies widerspricht unseren Erwartungen. Dies geschieht aufgrund einer Eigenschaft mask-type, die den undurchsichtigen Teil von SVG transparent macht. Dadurch wird die Hintergrundfarbe sichtbar.

Lass uns nicht tief gehen. Denken Sie daran, dass Sie background-colordie Farbe der Maske ändern können . Wenn Sie mit den verschiedenen Verwendungsweisen vertraut sindbackground-colorkönnen Sie auch Farbverläufe anwenden und einen einfachen Farbverlauf schreiben, der die Mitte mit Rot ausfüllt und sich radial um die Kanten herum schwarz ausbreitet. Der Code sieht so aus:

background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));

Das Ergebnis wird sein:



Animation hinzufügen


Fügen Sie jetzt eine Animation zu diesem leeren Gesicht hinzu. Verwenden expression.svgSie dazu den in der Abbildung unten gezeigten. Der Einfachheit halber habe ich alle svg-Dateien mit der gleichen Breite und Höhe erstellt, sodass ich die Gesichter und Ausdrücke nicht manuell ausrichten muss.



Jetzt mask-imagegibt es eine coole Option, mit der Sie mehrere Bilder als Masken verwenden können. So können wir dies tun: mask-image: url (face.svg), url (expression.svg);. Folgendes ist geschehen:



Eine der wichtigsten Eigenschaften von CSS-Masken besteht darin, mask-positiondass sich die Maske in der oberen linken Ecke relativ zum übergeordneten Element befindet. Und ich kann mehrere Masken mit der Eigenschaft mask-positiongenauso gestalten mask-image. Um eine Person traurig zu machen, verwenden wir etwas wie folgt aus : mask-position: 0 0, 0 12px;. Das ist was passiert ist.



Erste Position0 0für face.svgund die zweite 0 12px- für expression.svg. Dies führte zu einer Übertragung von 12 Pixeln und gab dem Gesicht den notwendigen Ausdruck.

Anwendung der Funktionalität


Lassen Sie uns diese Ausdrücke animieren, wenn Sie den Mauszeiger darüber bewegen. Der vollständige Code, den wir nach dem Anwenden der Hover-Pseudoklasse erhalten, lautet:

i {
  background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1));
  mask-image: url('face.svg'), url('expression.svg');
  mask-position: 00, 012px; /* To make the sad expression */transition: mask-position .5s ease-out;
}
i:hover {
  background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1));
  mask-position: 00, 00; /* To make the happy expression */transition: mask-position .1s linear;
}

Nachdem wir etwas mehr mit den Eigenschaften von CSS gespielt haben, können wir Folgendes tun:



Dies ist eine der Methoden, mit der die aufregendsten Animationen erstellt werden können, denen wir fast täglich begegnen.

Ein wichtiger Hinweis


Maskierung funktioniert möglicherweise nicht in allen Browsern. Um es in allen Browsern funktioniert, fügen Sie den Browser einfach spezielle Tags wie -webkit-, -moz-, und -0-.

Sie können den vollständigen Code auf Github und Codepen sehen . Danke! Ich hoffe es war hilfreich.


Gehen Sie zu VPS.today - eine Site zum Durchsuchen virtueller Server. 1500 Tarife von 130 Hostern, eine komfortable Schnittstelle und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.


Jetzt auch beliebt: