hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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.

7 conseils SEO pour booster votre entreprise locale

7 conseils SEO pour booster votre entreprise locale

Search Engine Optimization est un élément complexe, méthodique et important de toute entreprise en ligne, ou toute entité d'entreprise d'ailleurs. Sans SEO, votre site web sera juste enterré en dessous de la pile pourrie des résultats des moteurs de recherche et vous obtiendrez des conversions presque nulles. Avec

(Conseils techniques et de conception)

50+ sites pour télécharger des effets sonores gratuits pour presque tout

50+ sites pour télécharger des effets sonores gratuits pour presque tout

Imaginez un film ou une vidéo sans effets sonores. Même un film magnifique comme Titanic ne ressemblerait à rien d'autre qu'une blague s'il n'y a pas de sons 'Wham', 'Bam' et 'Smash'. La musique de fond et les effets sonores sont importants pour créer une vidéo (ou même une production audio) engageante et dans son essence même.Il y a

(Conseils techniques et de conception)