Wie man einen gestrichelten Rahmen mit CSS animiert

Verzierte Rahmen können jedes Element auf der Seite schmücken, CSS-Grenzen sind jedoch in Bezug auf den Stil begrenzt. Entwickler entwickeln häufig Lösungen wie CSS-Farbverläufe, SVG-Ränder, mehrere Ränder und mehr, um das Aussehen von Rahmen und deren Animationen zu simulieren und zu verbessern.

Heute werden wir einen einfacheren Hack für gestrichelte Rahmen suchen: gestrichelte Rahmenanimation. Der animierte gestrichelte Rahmen wird nur mit erstellt Gliederung und Box Schatten, keine Probleme mit Rückschlägen, da Gliederung wird ab IE8 unterstützt. Auf diese Weise kann der Benutzer die Ränder immer noch sehen, anders als bei der Verwendung von SVG oder Farbverlauf. Damit können Sie auch zweifarbige Striche erstellen. Lass uns einen Blick darauf werfen.

Die Grenzen gestalten

Wir werden zuerst die Grenzen schaffen. Dazu verwenden wir eine gestrichelte Kontur und einen Boxschatten.

 .Banner Umriss: 6px gestrichelt gelb; Box-Schatten: 0 0 0 6px # EA3556;… 

Das Gliederung wird alle seine Werte brauchen; Breite, Typ und Farbe. Das Box Schatten braucht nur den Wert für Verbreitung Dies sollte der Breite und der Farbe der Kontur entsprechen. Sowohl der Umriss als auch der Kästchenschatten erzeugen den Effekt von zweifarbigen Strichen.

Sie können dann die Breite oder Höhe des Kastens für den gewünschten Rand an den Ecken anpassen.

Animieren der Grenzen

Für unser erstes Animationsbeispiel fügen wir einem Satz von Bannern CSS-Keyframe-Animationen hinzu, wobei die Ränder kontinuierlich animiert werden und Aufmerksamkeit erhalten. Für den Animationseffekt tauschen wir einfach die Farben der Umrisse und des Boxschattens aus.

@keyframes animateBorder to Umrissfarbe: # EA3556; Box-Schatten: 0 0 0 6px Gelb; 

Sie können die Farbe der Kontur mit festlegen Umrissfarbe Langschreibeigenschaft, für Box Shadow müssen Sie jedoch zunächst alle Werte für die Kurzschreibeigenschaft angeben.

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

.Banner Umriss: 6px gestrichelt gelb; Box-Schatten: 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 im Schwebeflug. Sie können auch die Rahmengröße für verschiedene Effekte ändern.

.Fotos Umriss: 20px gestrichelt # 006DB5; Box-Schatten: 0px 0px 0px 20px # 3CFDD3; Übergang: alle 1s;… .photos: hover Umrissfarbe: # 3CFDD3; Box-Schatten: 0 0 0 20px # 006DB5; 

Bewegen Sie den Mauszeiger über diese Bilder, um Ihre gestrichelten CSS-Ränder in all ihrer animierten Pracht zu sehen.

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