Comment créer des animations de bordure CSS3 sans SVG ni JavaScript ?

Animation de bordure CSS3 sans SVG ni JavaScript

L'animation de bordure populaire vue sur tympanus.net, souvent créée en SVG, peut être recréée en utilisant du CSS3 pur. Cet article explique les étapes à suivre.

Création de l'animation

L'utilisation de plusieurs arrière-plans et l'animation de leurs positions permettent d'obtenir cet effet. Le code commence par le HTML suivant :

<code class="html"><div class="border">
  Some text
</div></code>

Le CSS de l'animation comprend quatre dégradés linéaires pour créer des bordures en pointillés de tous les côtés :

<code class="css">.border {
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}</code>

Cela établit l'arrière-plan avec ses quatre bordures en pointillés.

Au survol, les positions de l'arrière-plan sont modifiées pour créer l'animation effet :

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

Implémentation

Pour ajouter cette animation à chaque div d'article de blog, ajoutez simplement la classe "border" au div dans vos modèles WordPress.

Cette technique fournit une solution simple et uniquement CSS pour ajouter l'animation de bordure souhaitée à vos articles de blog WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!