Comment puis-je animer des bordures en pointillés en CSS3 sans SVG ni JavaScript ?

Animation de bordures en pointillés à l'aide de l'animation CSS3

Inspiré par un article sur Tympanus, vous souhaitez intégrer l'animation de bordure en pointillés accrocheuse dans votre Articles de blog WordPress. Cependant, le défi réside dans la reproduction de cet effet sans recourir à SVG ou JavaScript.

Pour y parvenir avec CSS uniquement, vous pouvez exploiter la puissance de plusieurs arrière-plans. En combinant deux dégradés linéaires et en ajustant leurs positions via une animation, vous pouvez créer l'illusion d'une bordure fringante. Voici comment :

<code class="css">.border {
  height: 100px;
  width: 200px;
  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;
}

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

Ce code crée quatre dégradés linéaires, chacun avec une direction différente, puis alterne leurs positions via la propriété background-position. La propriété de transition garantit un effet d'animation fluide lorsque l'utilisateur survole l'élément.

Cette approche imite l'animation de la bordure en pointillés sans avoir besoin de SVG ou de JavaScript, vous permettant d'ajouter facilement des bordures dynamiques à 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!