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.

MEAN vs LAMP Stack: Vor- und Nachteile

Web-Stacks haben sich über Jahrzehnte mit Fortschritten in Technologie und Backend-Sprachen entwickelt. Zwei der beliebtesten Web-Stacks sind derzeit LAMP und MEAN. Sie stützen sich auf zwei verschiedene Technologien für Backend-Sprachen, Datenbanken und Serverumgebungen. Der Begriff "Stack" bezieht sich auf Technologien, die übereinander gestapelt werden, um eine Web-Server-Umgebung zu erstellen .In

(Tech- und Design-Tipps)

Mischen Sie Ihre eigenen CSS-Verläufe mit dieser kostenlosen Web App

Jeder Webdesigner sollte über CSS3-Gradienten Bescheid wissen. Sie gibt es schon seit Jahren und sie werden von allen gängigen Browsern unterstützt.Und jetzt können Sie mit kostenlosen Web-Apps wie Blend CSS3-Verläufe direkt mit visuellen Editoren im Browser erstellen. Sie können zwischen linearen und radialen Farbverläufen wählen, während Sie mit Farben mischen.Die erst

(Tech- und Design-Tipps)