Share
Der „Welttag der psychischen Gesundheit“ der Weltgesundheitsorganisation ist am 10. Oktober 2018 hier, um das Bewusstsein für psychische Gesundheitsprobleme zu schärfen. In diesem Jahr liegt der Fokus auf der Ermutigung, uns alle dazu zu ermutigen, Programme und Dienstleistungen zu unterstützen und daran mitzuwirken, die junge Menschen erreichen können, und im Idealfall so effektiv wie möglich Probleme so früh wie möglich zu behandeln.
An diesem Tag werden wir CSS verwenden, um ein SVG zu animieren, das auf dem grünen Band zentriert ist, das viele Menschen tragen, um das Bewusstsein für psychische Gesundheit zu symbolisieren.
Wir haben zwei Hände, die sich auf der linken und rechten Seite der Bühne zusammenfügen, um zu zeigen, wie sich die Unterstützer gegenseitig unterstützen können. Danach wird das grüne Band zusammen mit einem beschreibenden Text angezeigt.
Wenn Sie fertig sind, haben Sie diese Animation (drücken Sie WIEDERHOLUNG wenn benötigt):
Ich habe den SVG- und HTML-Code im Voraus für Sie vorbereitet, sodass Sie sich auf die Verwendung von CSS konzentrieren können, um verschiedene Elemente zu animieren, aus denen die Illustration besteht.
Erstellen Sie zunächst eine leere HTML-Datei, kopieren Sie den folgenden Code und fügen Sie ihn ein:
Welttag der psychischen Gesundheit
Wenn Sie Ihre Datei in einem Browser speichern und in der Vorschau anzeigen, sollten Sie dieses Bild sehen, wobei alle SVG-Elemente sichtbar sind und einige über andere gestapelt sind:
Beginnen wir mit einer Aufgliederung der einzelnen Elemente in der SVG, damit Sie wissen, womit wir arbeiten.
Als Erstes haben wir die vordere Hand, die von der linken Seite des SVGs kommt:
Dann haben wir die hintere Hand, die von rechts eintritt:
Nachdem sich die beiden offenen Hände in der Mitte des Bildschirms gekreuzt haben, werden wir sie durch die gefalteten Hände ersetzen:
Wir haben dann das grüne Bewusstseinsband für geistige Gesundheit, das eingeblendet wird:
Der wichtigste "World Mental Health Day" -Text, der danach eingeblendet wird:
Und der Datumstext, der das letzte Element zum Einblenden ist:
Alles, was wir für unsere Animation benötigen, ist bereits im SVG-Code enthalten. Wir müssen nur die darin enthaltenen Elemente über ihre IDs erreichen und anvisieren.
Als Erstes müssen wir alle Elemente ausblenden, damit wir sie später zur richtigen Zeit anzeigen können. Fügen Sie den folgenden Code zwischen das ein Tags, die bereits in der soeben erstellten HTML-Datei vorhanden sind.
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date Deckkraft: 0;
Wir werden verwenden @keyframes Animationen für jeden Teil unserer Sequenz. Die erste Animation, die wir erstellen, ist eine, die ein Element von einer Position außerhalb des linken Randes des SVG zu seiner ursprünglichen Position in der Mitte bewegen kann.
Fügen Sie Ihrem CSS den folgenden Code hinzu.
@keyframes infromleft from transform: translate (-100%); Deckkraft: 1; in umwandeln: übersetzen (0%); Deckkraft: 1;
Lassen Sie uns durchgehen, was wir mit diesem Code machen.
Wir müssen nur unser Element von einer Position zur anderen bewegen, anstatt es durch Zwischenpositionen im Zickzack zu führen. Aus diesem Grund können wir einfach verwenden von und zu anstatt prozentuale Keyframes angeben zu müssen.
In dem von Keyframe verwenden wir die verwandeln Eigentum an Übersetzen, das Element ganz nach links, eine Position, die als ausgedrückt wird -100%. In dem zu Keyframe geben wir die ursprüngliche Position des Elements mit an 0%. Die Keyframe-Animation wird automatisch das Element zwischen verschieben von und zu Zustände.
Sie werden auch das bemerken Opazität ist eingestellt auf 1 in beiden Keyframes. Das bedeutet, dass das Element am Anfang der Animation angezeigt wird, bis zum Ende sichtbar bleibt und dann auf die Standardeinstellung zurückgesetzt wird Opazität von 0 wir setzen früher und verschwinden wieder. Dies muss geschehen, um Platz für das Element der gefalteten Hände zu schaffen, das danach erscheinen wird.
Jetzt können wir die Animation auf das vordere Handelement unseres SVG anwenden, das die ID verwendet #fronthand. Fügen Sie Ihrem Code das folgende CSS hinzu.
#fronthand animation-name: infromleft; Animationsdauer: 1,5s; Animations-Timing-Funktion: Erleichterung;
Hier geben wir den Namen der Animation an, d. H. infromleft, das wird die Animation auslösen, die wir gerade erstellt haben. In der zweiten Zeile wird die Animation über einen Zeitraum von 1,5 Sekunden ausgeführt. Und in der dritten Zeile sagen wir, dass Sie das verwenden sollen Bequemlichkeit Animations-Timing-Funktion, mit der die Bewegung schnell beginnt und zum Ende hin langsamer wird.
Wenn Sie Ihre Seite jetzt speichern und aktualisieren, sollten Sie sehen, wie die vordere Hand von der Seite hereinkommt und in der Mitte stehen bleibt (siehe Abbildung unten), bevor sie verschwindet:
Wir erstellen jetzt eine weitere fast identische Animation zur ersten, mit dem Unterschied, dass sich das Element von rechts anstatt von links bewegt. Fügen Sie dieses CSS Ihrem Style hinzu:
@keyframes infromright from transform: translate (100%); Deckkraft: 1; in umwandeln: übersetzen (0%); Deckkraft: 1;
Das wirst du im sehen von Keyframe übersetzen wir mit 100% anstatt -100%, Dadurch wird der Startpunkt der Animation über den rechten Rand hinaus verschoben. Alles andere in diesem Code stimmt mit der letzten Animation überein.
Wir werden diese Animation auf das hintere Handelement im SVG anwenden, indem Sie folgenden Code hinzufügen:
#rearhand Animationsname: infromright; Animationsdauer: 1,5s; Animations-Timing-Funktion: Erleichterung;
Jetzt sollten Sie die beiden Hände zusammenkommen sehen, bis sie in der Mitte kreuzen, bevor sie wieder verschwinden.
Die beiden offenen Hände sind bereits verschwunden, sobald sie sich bewegt haben. Als nächstes müssen wir das Element der gefalteten Hände sofort genau in dem Moment erscheinen, in dem die offenen Hände verschwinden.
Um dies zu ermöglichen, erstellen wir eine weitere Keyframe-Animation mit dem Namen instantappear. Alles, was diese Animation tun wird, ist die Einstellung Opazität zu 1 während der Animation. Fügen Sie dieses CSS in Ihre Datei ein:
@keyframes instantappear von Deckkraft: 1; bis Deckkraft: 1;
Wenden Sie die Animation auf #geschliffene Hände Element mit diesem Code:
#claspedhands Animationsname: instantappear; Animationsdauer: 1s; Animationsverzögerung: 1,5s; Animations-Füllmodus: vorwärts;
Hier in den ersten beiden Zeilen nennen wir unsere instantappear Animation und legen Sie seine Dauer bis 1 Sekunde.
In der dritten Zeile sagen wir die Animation verzögern um 1,5 Sekunden, was der Dauer unserer ersten beiden Animationen entspricht. Sobald diese beendet ist, beginnt diese Animation.
In der vierten Zeile setzen wir dann die Animation-Füllmodus Eigentum an vorwärts. Dies bedeutet, dass die Animation beim letzten Frame angehalten und dort bleiben soll. Dadurch bleibt das Element bei Opazität von 1 wird am Ende des Keyframes festgelegt, anstatt zur Standardeinstellung zurückzukehren Opazität von 0 wie unsere Vorder- und Hinterhände.
Zeigen Sie eine Vorschau Ihrer Animation an und wenn Sie fertig sind, sollten Sie Folgendes sehen:
Wir brauchen nur noch eine Animation für die drei verbleibenden Elemente, eine, die alles eingeblendet wird, auf das sie angewendet wird. Wir können es für jedes Element mit unterschiedlichen Einstellungen verwenden, um unsere Sequenz abzuschließen.
Erstellen Sie eine neue Animation mit dem Namen einblenden und setze es auf den Übergang von Opazität 0 zu Opazität 1 wie so:
@keyframes fadein from Deckkraft: 0; bis Deckkraft: 1;
Das grüne Band ist das nächste Element, das wir anzeigen möchten. Wenden Sie also unser neues an einblenden Animation dazu mit folgendem CSS:
#ribbon animation-name: fadein; Animationsdauer: 0,75s; Animationsverzögerung: 1,75s; Animations-Füllmodus: vorwärts;
Hier haben wir die Einblendeffektdauer für drei Viertelsekunden, und wir legen fest, dass sie bei 1,75 Sekunden beginnt, nachdem die vorhergehenden Animationen abgeschlossen sind. Wieder verwenden wir Animations-Füllmodus: vorwärts; um das Element zu gewährleisten Opazität bleibt bei 1 anstatt zurück zu gehen 0.
Wenn Ihre Sequenz abgeschlossen ist, sollten Sie jetzt Folgendes sehen:
Jetzt lassen wir auch den Haupttext einblenden. Wir haben schon eine #wmhd Formatieren Sie das Dokument, und aktualisieren Sie es wie folgt:
#wmhd font-weight: fett; Schriftgröße: 72px; füllen: # 282828; Animationsname: Fadein; Animationsdauer: 0,75s; Animationsverzögerung: 2,25s; Animations-Füllmodus: vorwärts;
Wir verwenden den gleichen Code wie auf der #Band Element, nur die Verzögerung auf 2,25 Sekunden aus, so dass wir das Erscheinungsbild der Elemente stufen.
Ihre Animation sollte jetzt in diesem Zustand enden:
Schließlich müssen wir das Datum erscheinen lassen, also das vorhandene Datum aktualisieren #Datum Stil zu:
#date font-size: 48px; füllen: # 278927; Animationsname: Fadein; Animationsdauer: 0,75s; Animationsverzögerung: 2,75s; Animations-Füllmodus: vorwärts;
Die einzige Änderung besteht darin, die Startzeit der Animation zu verschieben.
Mit diesem letzten Code-Stück ist Ihre Animation nun abgeschlossen. Wenn die Ausführung abgeschlossen ist, sollte sie folgendermaßen aussehen:
Weitere Informationen zum Welttag der psychischen Gesundheit finden Sie auf der Website der WHO.
Accentsconagua