Comment animer une bordure pointillée avec CSS

Les bordures décorées peuvent orner n'importe quel élément de la page, mais les bordures CSS sont limitées en termes de style. Les développeurs proposent souvent des solutions telles que des bordures en dégradé CSS, des bordures SVG, des bordures multiples, etc., pour imiter et améliorer l'aspect des bordures de boîte et de ses animations..

Aujourd'hui, nous allons examiner un hack plus simple pour les bordures en pointillés: l'animation de bordures en pointillés. La bordure en pointillés animée sera créée en utilisant uniquement contour et boîte ombre, ne laissant aucune inquiétude sur les replis, car contour est pris en charge à partir de IE8. De cette manière, l'utilisateur pourra toujours voir les bordures, contrairement à SVG ou au dégradé. Avec cela, vous pouvez également créer des tirets bicolores. Nous allons jeter un coup d'oeil.

Créer les frontières

Nous allons d'abord créer les frontières. Pour cela, nous allons utiliser un contour en pointillé et une ombre de boîte.

 .bannières contour: 6px en pointillé jaune; box-shadow: 0 0 0 6px # EA3556;… 

le contour aura besoin de toutes ses valeurs; largeur, type et couleur. le boîte ombre n'a besoin que de la valeur pour propager qui devrait être la même que la largeur du contour et sa couleur. Le contour et l'ombre de la boîte créeront tous deux l'effet de tirets bicolores..

Vous pouvez ensuite ajuster la largeur ou la hauteur de la boîte pour que votre bordure souhaitée apparaisse aux coins.

Animer les frontières

Pour notre premier exemple d'animation, nous allons ajouter des animations d'images clés CSS à un ensemble de bannières dont les bordures s'animent en permanence, ce qui attire l'attention. Pour l'effet d'animation, nous allons simplement échanger les couleurs du contour et de l'ombre de la boîte..

@keyframes animateBorder to outline-color: # EA3556; boîte-ombre: 0 0 0 6px jaune; 

Vous pouvez cibler la couleur du contour en utilisant contour-couleur propriété longhand, cependant pour l’ombre de la boîte, vous devrez donner toutes les valeurs à la propriété raccourci pour le moment.

Une fois l'animation prête, ajoutez-la à la boîte.

.bannières contour: 6px en pointillé jaune; box-shadow: 0 0 0 6px # EA3556; animation: 1s animateBorder infinite;…

Transitions aux frontières

Pour l'exemple de transition, nous allons ajouter des bordures aux images et animer celles qui sont en survol. Vous pouvez également changer la taille de la bordure pour différents effets.

.photos contour: 20px en pointillé # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transition: tous les 1;… .photos: survol contour-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Maintenant, survolez ces images pour voir vos frontières en pointillés CSS dans toute sa gloire animée.

Et c'est un wrap. Vous pouvez essayer de remplacer les bordures en pointillés par des points, mais l’effet risque de ne pas être aussi bon. Vous pouvez également changer le type de contour pendant l'animation pour quelques effets supplémentaires.