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.

10 Konvertierungsdienste für Ihre Kodierungsanforderungen

Wenn Sie ein typischer Webdesigner sind, überlassen Sie die Programmierung natürlich jemand anderem, entweder weil Sie keine Wahl haben, oder Sie haben nicht die Zeit oder Mühe, die Codierung selbst vorzunehmen. Sogar Web-Designer, die sich mit der Programmierung auskennen, ziehen es vor, einen professionellen Entwickler zu haben, der die Arbeit erledigt, um sicherzustellen, dass sie schnell und genau durchgeführt wird.Das

(Tech- und Design-Tipps)

Valentinstag Ressourcen: 20 Icon-Sets, um Sie in die Stimmung

Liebe ist in der Luft! Valentinstag ist gleich um die Ecke und es ist eine perfekte Zeit, um die Liebe mit erstaunlichen Werbegeschenken zu teilen! Was wir heute für Sie haben, ist eine Zusammenstellung von 20 Valentinstag-Icon-Sets, die Sie kostenlos herunterladen können .Von Herzen über Teddybären und Bonbons bis hin zu Weinflaschen - Sie werden bestimmt einige Symbole aus der Liste aufgreifen, die zu jedem Gefühl und jeder Atmosphäre passen, die Sie erreichen möchten - natürlich ganz im Sinne des Valentinstags.Sie kön

(Tech- und Design-Tipps)