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

Animation de bordure CSS3 sans SVG

L'article référencé présente une animation de bordure en pointillés accrocheuse créée avec SVG. Bien que cette animation puisse être visuellement attrayante, elle peut ne pas convenir à toutes les applications en raison de sa nature SVG. Cet article explore une approche alternative pour obtenir un effet similaire uniquement en utilisant CSS3, sans nécessiter JavaScript ou SVG.

Pour illustrer cette approche, considérons l'extrait de code suivant :

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

.go:hover {
  border-width: 12px;
}</code>

<code class="html"><div class="go">
  This is a div with dashed border animation.
</div></code>

Dans cet exemple, nous définissons une classe .go avec une bordure en pointillés. Lorsque la souris survole le div, nous augmentons dynamiquement la largeur de la bordure, créant ainsi un effet d'expansion visuelle. Cette animation de base peut être améliorée à l'aide de techniques CSS supplémentaires.

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed black;
  animation: dash 2s infinite;
}

@keyframes dash {
  0% {
    border-width: 0px;
  }
  100% {
    border-width: 16px;
  }
}</code>

Ici, nous introduisons des animations CSS pour créer un effet de tiret continu. La règle @keyframes définit une série d'états au fil du temps et la propriété animation spécifie les paramètres de l'animation. Cette animation produit un effet plus attrayant visuellement où la bordure en pointillés s'étend et se contracte de manière dynamique.

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!