Comment créer une bordure pointillée animée en CSS sans utiliser SVG ou JavaScript ?

Animation de bordure en pointillés sans SVG en CSS3

La question soulevée est de savoir comment implémenter l'effet de bordure en pointillés animé démontré dans l'article fourni sans utiliser SVG ou JavaScript dans les divs de publication d'un blog WordPress.

Solution pour obtenir une animation de bordure en pointillés non SVG :

Heureusement, il est possible d'obtenir cet effet uniquement avec CSS , en exploitant plusieurs arrière-plans et en animant leurs positions.

Voici un extrait de code qui présente l'implémentation :

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

Dans ce code :

• Plusieurs des dégradés linéaires sont utilisés pour créer l'effet de bordure en pointillés.
• La propriété background-position est animée au survol pour déplacer les positions du dégradé et créer du mouvement.
• L'état de survol déclenche l'animation, donnant au impression d'une bordure en pointillés avec un effet de mouvement.

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!