Comment animer une bordure en pointillés avec CSS

Les bordures décorées peuvent orner n'importe quel élément de la page, mais les bordures CSS sont limitées quand il s'agit de style. Les développeurs proposent fréquemment des solutions telles que les bordures de dégradés CSS, les bordures SVG, les bordures multiples et bien d'autres pour imiter et améliorer l'apparence des bordures de boîte et de ses animations.

Aujourd'hui, nous allons nous pencher sur un hack plus simple pour les bordures en pointillés: l'animation de la bordure en pointillés. La bordure animée en pointillés sera créée en utilisant seulement le outline et la box-shadow, ne laissant aucune agitation au sujet des retombées, puisque le outline est soutenu à partir d'IE8. De cette façon, l'utilisateur pourra toujours voir les bordures contrairement au 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és et une ombre en forme de boîte.

 .banners {outline: 6px en pointillé jaune; boîte-ombre: 0 0 0 6px # EA3556; ...} 

Le outline aura besoin de toutes ses valeurs; largeur, type et couleur. La box-shadow seulement besoin de la valeur pour la propagation qui devrait être la même que la largeur du contour et sa couleur. Le contour et la boîte-ombre ensemble créeront l'effet des tirets bicolores.

Vous pouvez ensuite ajuster la largeur ou la hauteur de la boîte pour l'apparence de votre bordure souhaitée.

Animer les frontières

Pour notre premier exemple d'animation, nous ajouterons des animations d'images clés CSS à un ensemble de bannières dont les frontières s'animent continuellement, attirant 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 {contour-couleur: # EA3556; boîte-ombre: 0 0 0 6px jaune; }} 

Vous pouvez cibler la couleur du contour à l'aide outline-color propriété main courante outline-color, cependant pour l'ombre de la case, vous devrez donner toutes les valeurs à la propriété raccourci pour l'instant.

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

 .banners {outline: 6px en pointillé jaune; boîte-ombre: 0 0 0 6px # EA3556; animation: 1s animateBorder infini; ...} 

Transitions sur les frontières

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

 .photos {outline: 20px en pointillés # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transition: tous les 1s; ...} .photos: hover {outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; } 

Maintenant, passez la souris sur ces images pour voir votre CSS bordé de bordures dans toute sa gloire animée.

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

20 montagnes russes créatives que vous allez certainement aimer

Ils disent que "la maison est où le coeur est", encore, il ne fait pas de mal d' avoir votre maison décorée comme vous le voulez . Il existe de nombreuses façons de rendre votre lieu plus confortable, par exemple en installant des luminaires ou en transformant l'espace supplémentaire sous vos escaliers. Ce

(Conseils techniques et de conception)

Marketing vous-même - Conseils sur la façon de tirer parti de vos points faibles

Personne n'est parfait. Personne n'a besoin d'être. Nous avons tous des faiblesses. Ces faiblesses sont le carburant même qui peut nous faire avancer . L'humanité a fait cela pour des milliers d'années. Nous avons inventé des lances pour surmonter nos faiblesses d'agilité et être capable de chasser des animaux beaucoup plus rapides.Nous a

(Conseils techniques et de conception)