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.

Comment utiliser les littéraux de modèle ES6 en JavaScript

En programmation, le terme "littéral" se réfère à la notation des valeurs dans le code. Par exemple, nous notons une valeur de chaîne avec un littéral de chaîne qui sont des caractères entre guillemets doubles ou simples ( "foo", 'bar', "This is a string!" ).Les lit

(Conseils techniques et de conception)

50 recettes d'infographie pour vous aider à mieux cuisiner

Les gens ne cuisinent plus, ce qui est dommage. C'est un art perdu, plus encore pour certaines générations que pour d'autres (ne pointez pas les doigts ici) mais ne pas pouvoir cuisiner est une perte. L'une des principales raisons pour lesquelles beaucoup ne cuisinent pas est qu'ils ne savent pas comment, et n'ont pas le temps ou l'intérêt de se apprendre quelques bonnes recettes.Ne

(Conseils techniques et de conception)