Wie man einen gestrichelten Rand mit CSS animiert

Verzierte Rahmen können ein beliebiges Element auf der Seite schmücken, CSS-Rahmen sind jedoch in Bezug auf den Stil begrenzt. Entwickler entwickeln häufig Lösungen wie CSS-Farbverlaufsränder, SVG-Rahmen, mehrere Rahmen und mehr, um das Erscheinungsbild von Rahmen und Animationen zu simulieren.

Heute werden wir einen einfacheren Hack für gestrichelte Grenzen betrachten: gestrichelte Rahmenanimation. Die animierte gestrichelte Umrandung wird nur mit outline und box-shadow, sodass keine Probleme mit Fallbacks entstehen, da outline ab IE8 unterstützt wird. Auf diese Weise kann der Benutzer die Grenzen immer noch sehen, anders als wenn SVG oder Gradient verwendet wird. Mit diesem können Sie auch zweifarbige Bindestriche erstellen. Lass uns einen Blick darauf werfen.

Erstellen der Grenzen

Wir werden zuerst die Grenzen schaffen. Dafür verwenden wir eine gestrichelte Umrandung und einen Box-Schatten.

 .banner {Umriss: 6px gestrichelt gelb; Kastenschatten: 0 0 0 6px # EA3556; ...} 

Die outline benötigt alle ihre Werte; Breite, Art und Farbe. Der box-shadow benötigt nur den Wert für die Breite, der der Breite und Farbe der Kontur entsprechen sollte. Sowohl der Umriss als auch der Box-Shadow zusammen erzeugen den Effekt von zweifarbigen Bindestrichen.

Sie können dann die Breite oder Höhe der Box für den gewünschten Rahmen an den Ecken anpassen.

Animieren der Grenzen

Für unser erstes Animationsbeispiel fügen wir CSS-Keyframe-Animationen zu einer Reihe von Bannern hinzu, deren Grenzen ständig animiert werden und Aufmerksamkeit erregen. Für den Animationseffekt tauschen wir einfach die Farben des Umrisses und des Boxschattens aus.

 @keyframes animateBorder {to {Umrissfarbe: # EA3556; Kastenschatten: 0 0 0 6px gelb; }} 

Sie können die Farbe der Umrisslinie mit der outline-color Langhandeigenschaft festlegen, für Boxschatten müssen Sie jedoch zunächst alle Werte der Stenografieeigenschaft zuweisen.

Sobald die Animation fertig ist, füge sie der Box hinzu.

 .banner {Umriss: 6px gestrichelt gelb; Kastenschatten: 0 0 0 6px # EA3556; Animation: 1s animateBorder unendlich; ...} 

Übergänge an den Grenzen

Für das Übergangsbeispiel fügen wir den Bildern Rahmen hinzu und animieren diese beim Hover. Sie können auch die Rahmengröße für verschiedene Effekte ändern.

 .photos {Umriss: 20px gestrichelt # 006DB5; Box-Schatten: 0px 0px 0px 20px # 3CFDD3; Übergang: alle 1s; ...} .photos: hover {outline-color: # 3CFDD3; Box-Schatten: 0 0 0 20px # 006DB5; } 

Bewegen Sie den Mauszeiger über diese Bilder, um Ihre CSS-gestrichelten Rahmen in ihrem gesamten animierten Glanz zu sehen.

Und das ist ein Wrap. Sie können versuchen, gestrichelte Umrandungen durch gepunktete Umrandungen zu ersetzen, aber der Effekt ist möglicherweise nicht so gut. Sie können den Umrisstyp während der Animation auch für einige weitere Effekte ändern.

30 besten kostenlosen WordPress Slideshow Plugins (2018)

Diashows sind das beste Element auf einer bildstarken oder inhaltsorientierten Website, um den Besuchern vorgestellte Bilder zu präsentieren. Zu den nützlichsten Plugins für Ihre WordPress-Seite gehören daher die Slideshow-Plugins, mit denen Sie Diashows auf Ihrer Website ganz einfach erstellen und verwalten können.Und

(Tech- und Design-Tipps)

Acht mobile Apps für 3D Design & Skizzieren

Mithilfe von 3D-Modellierungswerkzeugen und -software können Sie Ihre Ideen in wunderschöne 3D-Modelle und -Prototypen verwandeln . Weit verbreitet in Branchen wie 3D-Druck, Animation, Gaming, Architektur und Industriedesign, sind 3D-Designs wichtige Bestandteile der digitalen Produktion.Wie jedes andere Tool, das mobil wird, finden auch Apps für 3D-Design und -Skizzen schnell ihren Weg zu den Smartphones und Tablets. A

(Tech- und Design-Tipps)