Comment créer une bordure pointillée animée avec CSS sans SVG ?

Animation de bordures pointillées avec CSS3

Inspiré par un article captivant, vous désirez intégrer une bordure pointillée animée à vos articles de blog WordPress. Cependant, vous rencontrez un obstacle en raison de l’utilisation de SVG dans la conception originale. Voici une solution qui vous permet d'obtenir l'effet souhaité sans recourir ni au SVG ni au JavaScript.

En utilisant plusieurs arrière-plans et en animant leurs positions via CSS, il est possible de créer un effet fringant. Voici le code pour y parvenir :

<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>

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

Lors de la mise en œuvre de ce code, les divs de votre article de blog afficheront une bordure pointillée animée lorsqu'ils seront survolés. Cette technique offre une alternative légère et personnalisable à l'animation SVG.

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!