Erinnerst du dich an die Cartoons, die wir als Kind gesehen haben? Zu dieser Zeit waren sie die Personifikation der Animation. Jetzt sind Animationen nicht nur Cartoons, wir treffen sie fast jeden Tag, indem wir das Telefon überprüfen oder ein Gerät mit Bildschirm verwenden.
Heutzutage wird Animation nicht nur verwendet, um Aufmerksamkeit zu erregen, sondern auch um die Benutzerinteraktion zu verbessern und die Navigation zu erleichtern. In jedem guten Design wird die Animation so hinzugefügt, dass sie mit dem Gesamtkonzept kombiniert wird, wodurch eine bequeme Benutzeroberfläche entsteht.
In diesem Artikel erstellen wir eine einfache Animation des Gesichts mit verschiedenen Ausdrücken und lernen dabei etwas über CSS.
Fangen wir an
Wir werden die CSS-Technik verwenden, die von Webentwicklern selten verwendet wird, auf die Designer jedoch häufig zurückgreifen. Es heißt Maskierung.
Was fällt Ihnen ein, wenn Sie die Worte „Maske“ hören? Sie haben sich wahrscheinlich etwas vorgestellt, das die Essenz verdunkelt. Das ist alles was wir wissen müssen.
Warten Sie - aber in dem Artikel geht es um das Schreiben und Verwenden von CSS-Animationen ... Keine Panik! Alles klar!
Erstellen Sie eine Basismaske
Angenommen, wir haben ein
div Tag mit
background: green; und es sieht ungefähr so aus:
Es gibt auch eine
face.svg Datei:
Wenn wir die CSS-Eigenschaft
mask-image: url (face.svg); anwenden
mask-image: url (face.svg); div Sie zum
div Tag gehen, werden Sie erstaunt sein, das Ergebnis zu sehen:
Du denkst vielleicht, das ist seltsam. Das face.svg-Bild wurde über dem
div , nahm jedoch eine Hintergrundfarbe an. Dies widerspricht unseren Erwartungen. Dies geschieht aufgrund der Eigenschaft
mask-type , die den undurchsichtigen Teil von svg transparent macht. Dadurch wird die Hintergrundfarbe sichtbar.
Gehen wir nicht tief. Denken Sie daran, dass Sie die
background-color , um die Farbe der Maske zu ändern. Wenn Sie mit den verschiedenen Verwendungsmöglichkeiten von
background-color vertraut sind, können Sie auch Farbverläufe anwenden und einen einfachen Farbverlauf schreiben, der die Mitte mit Rot füllt und Schwarz radial um die Ränder verteilt. Der Code sieht folgendermaßen aus:
background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));
Das Ergebnis wird folgendermaßen aussehen:
Animation hinzufügen
Fügen Sie nun diesem leeren Gesicht eine Animation hinzu. Verwenden Sie dazu
expression.svg , das Sie im Bild unten sehen. Der Einfachheit halber habe ich alle SVG-Dateien mit derselben Breite und Höhe erstellt, sodass ich Flächen und Ausdrücke nicht manuell ausrichten muss.
Jetzt hat das
mask-image eine coole Option, mit der Sie mehrere Bilder als Masken verwenden können. Daher können wir dies tun:
mask-image: url (face.svg), url (expression.svg); . Folgendes ist passiert:
Eine der wichtigsten Eigenschaften von CSS-Masken ist die
mask-position , aufgrund derer sich die Maske in der oberen linken Ecke relativ zum übergeordneten Element befindet. Und ich kann mehrere Masken mit der
mask-position genau wie mit dem
mask-position anordnen. Um ein Gesicht traurig zu machen, verwenden Sie
mask-position: 0 0, 0 12px; . Folgendes ist passiert.
Die erste Position ist
0 0 für
face.svg und die zweite
0 12px ist für
expression.svg . Dies führte zu einer Übertragung von 12px und gab dem Gesicht den notwendigen Ausdruck.
Funktionalität anwenden
Lassen Sie uns nun diese Ausdrücke beim Schweben animieren. Der vollständige Code, den wir nach dem Anwenden der Schwebepseudoklasse erhalten, sieht folgendermaßen aus:
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: 0 0, 0 12px; 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: 0 0, 0 0; transition: mask-position .1s linear; }
Nachdem wir ein wenig mehr mit CSS-Eigenschaften gespielt haben, können wir Folgendes tun:
Dies ist eine der Methoden, mit denen Sie die sehr aufregenden Animationen erstellen können, denen wir fast täglich begegnen.
Ein wichtiger Punkt
Die Maskierung funktioniert möglicherweise nicht in allen Browsern. Damit es in allen Browsern funktioniert, fügen Sie einfach spezielle Browser-Tags wie
-webkit- ,
-moz- und
-0- .
Sie können den vollständigen Code auf
Github und
Codepen sehen . Vielen Dank! Hoffe es war hilfreich.
Schauen Sie sich VPS.today an , eine Website zum Auffinden virtueller Server. 1500 Tarife von 130 Hostern, eine praktische Schnittstelle und eine Vielzahl von Kriterien, um den besten virtuellen Server zu finden.