Beginnen Sie mit CSS-Polygonen

Die grundlegende Struktur von rechteckigen Blöcken und Kreisen, die Websites bilden, hat Designer und kreative Entwickler lange Zeit gleichermaßen geplagt. Als CSS-Clip-Path-Polygone in WebKit-Browsern auf die Bühne kamen, brannte ich sofort vor Aufregung.

Die Eigenschaft wird hauptsächlich zum Umbrechen von Text und zum Maskieren von Inhalten verwendet und bietet Designern auch die Möglichkeit, aufregendere Formen in reinem CSS zu erstellen, ohne dass Leinwand oder SVG erforderlich sind. Ich hatte das Gefühl, dass dies die Art und Weise, wie ich entwerfe und entwickle, verändern könnte, mit Ergebnissen, deren Wirkung nicht lange dauern würde.



Der Hauptzweck von Clip-Path besteht darin, einen Bereich zu maskieren (nicht nur Bilder, sondern den tatsächlichen Inhalt). In diesem Lernprogramm werde ich jedoch speziell untersuchen, was mit der Polygoneigenschaft getan werden kann. Ich werde Ihnen zeigen, wie Sie mit Sass-for-Schleifen umfassende Übergangseffekte erzielen und eine Sammlung von CSS-Polygonen zum Leben erwecken können.

Erstellen Sie die Divs

Wir erstellen einen Fächereffekt, bei dem jedes der sieben dreieckigen Polygone von einem zentralen Punkt aus animiert wird

Wir erstellen einen Fächereffekt, bei dem jedes der sieben dreieckigen Polygone von einem zentralen Punkt aus animiert wird

Was wir anstreben, ist ein Effekt, bei dem eine Reihe dreieckiger Formen von einem zentralen Punkt aus auffächern (siehe Abbildung) der Codepen für dieses Tutorial ). Zuerst müssen Sie Divs für so viele Polygone erstellen, wie Sie benötigen (hier verwende ich sieben), und sie übereinander legen.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

Erstellen Sie den ersten Status der Polygone

Wir werden die Polygone so umstellen, dass der Fächer von der Mitte nach außen wächst. Dazu möchten wir zunächst den ursprünglichen Zustand der Polygone definieren. Wir fügen eine Hintergrundfarbe hinzu, die automatisch in der von Ihnen erstellten Form maskiert wird:

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

Animationsauslöser

Sie benötigen einen Bewegungsauslöser, damit der Übergang stattfinden kann. Hier platzieren wir einfach einen Schwebezustand auf dem Wrapper-Element.

.polygon-wrap:hover { }

Erstellen Sie Polygone

Sehr erfreulich ist, dass CSS-Polygone mit nur einer einzigen Codezeile erstellt werden. Polygone können jede beliebige Form annehmen: Sie sind nicht an eine beliebige Anzahl von Punkten oder Seiten gebunden. Wenn Sie jedoch eine Form wie die hier gezeigte ändern, denken Sie daran, dieselbe Anzahl von Punkten und denselben Punkt innerhalb des Arrays zu verwenden, um jeden folgenden Punkt zu animieren:

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

Dieses Polygon hat eine dreieckige Form, die die linke Seite des siebenteiligen Lüfters bildet. Die Prozentwerte richten sich nach einer X- und Y-Koordinate, basierend auf der Größe des übergeordneten Div.

Übergänge über for-Schleife

Nachdem Sie die zweiten Zustände Ihrer Polygone erstellt haben, können Sie mit Sass for-Schleifen einen umfassenden Satz von Übergängen erstellen. Diese bewirken, dass jedes Div etwas langsamer als sein Vorgänger animiert wird, wodurch ein 'Mischgefühl' entsteht. Dies steigert auch die Leistung, da der Prozessor eine Sache nach der anderen ausführt und nicht sieben Dinge gleichzeitig.

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

Dieses Codebit erzeugt im Wesentlichen den Zeitunterschied für jeden der Divs. Der Anfangspuffer ist die Übergangsbasis (hier 0,2 Sekunden). Als nächstes gibt es einen Verzögerungswert (0,1 Sekunden). Dieser Wert wird mit der Bestellnummer des Div (von eins bis sieben) multipliziert, um die Übergangsverzögerung zu erhalten.

In Stücken

In Stücken

In Stücken

In einem persönlichen Projekt, In Stücken Ich habe dieselbe Polygoneigenschaft verwendet, um Bilder von 30 verschiedenen gefährdeten Tieren zu erstellen, die jeweils aus 30 dreieckigen 'Stücken' bestehen. Ich habe Basis-CSS-Übergänge verwendet, um von Tier zu Tier in einer schwungvollen Bewegung über den Bildschirm zu mischen. Die Tiere scheinen sich ineinander zu verwandeln; Ein Effekt, der mithilfe der in diesem Lernprogramm beschriebenen Übergangsverzögerungen erzeugt wird.

Innerhalb von In Pieces wird die Bewegung nacheinander erstellt. div-Elemente erhalten untergeordnete Index-Ganzzahlen, die dann mit einem bestimmten Wert multipliziert werden, um die Verzögerungszeit zu erhalten. Ich habe 30 div-Elemente verwendet, um die 30 einzelnen Polygone zu enthalten. Ich habe dann eine Übergangsverzögerung von 0,1 Sekunden eingeführt, sodass das 10. Polygon nach einer Sekunde (0,1 x 10) animiert wurde und das 30. Polygon nach drei Sekunden (0,1 x 30) überging.

Schimmereffekt

Diese Verzögerungen wurden auch verwendet, um den Tieren einen 'Schimmer' zu verleihen, der alle paar Sekunden sichtbar ist. Die Abfolge der Verzögerungen ermöglicht einen einfachen Wechsel der Deckkraft aller Elemente, wodurch ein schwungvoller Schimmer erzeugt wird, der der Wirkung von Licht auf Glas ähnelt. Dies ist ein sehr spezifisches Beispiel, und die Verwendung solcher Verzögerungen ist nicht nur auf CSS-Polygone beschränkt.

Was diese Verzögerungen speziell bewirken, ist ein Element der Fluidität der Bewegung, das eine weitaus natürlichere Animation erzeugt. Es ist eine subtile, aber äußerst lohnende Berührung. Ohne diese Mischung kann eine Reihe von Polygonen, die sich in etwas anderes verwandeln, sehr hart für das Auge sein. Dies sorgt auch für eine bessere Leistung, da weniger gleichzeitige Bewegungen auftreten.

Fazit

Hier hast du es! Dies ist eine großartige Möglichkeit, sequenzierte Bewegungen mit Polygonen zu erzeugen. Es gibt viele aufregende kreative Möglichkeiten, die Sie mit CSS-Polygonen erkunden können. Spielen Sie also herum und sehen Sie, was Sie mit diesen Formen tun können.

Wörter :: Bryan James

Bryan James ist ein freiberuflicher Designer und kreativer Programmierer, der für sein Schaffen bekannt ist In Stücken . Dieser Artikel wurde ursprünglich in Ausgabe 272 von veröffentlicht Netzmagazin .

Mochte dies? Lese das!