Dashed Border March
Cadre en tirets SVG qui défilent en continu autour d'une boîte de n'importe quelle taille ; le trait s'éclaircit et s'épaissit au survol, au focus et au toucher.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Un <svg> posé en absolu dans .dsm-box contient un seul <rect> de 100 % × 100 % aux coins arrondis de 12 px. Le SVG est décalé de 1,5 px vers l'intérieur et réduit de 3 px dans chaque sens (la moitié du trait de 3 px), avec overflow: visible : le contour tombe pile sur le bord de la boîte, quelle que soit sa largeur ou sa hauteur. Agrandissez la boîte, ajoutez-y du texte, le tracé suit sans une ligne de script.
Le trait violet #6366f1 est découpé par stroke-dasharray: 12, 8 (12 px de tiret, 8 px de vide). L'animation dsm-march fait glisser stroke-dashoffset de 0 à -40 en 1,5 s, en boucle linéaire : comme -40 vaut deux motifs complets, la reprise est invisible et les tirets semblent marcher autour du cadre.
Quand la boîte est survolée, qu'elle reçoit le focus (elle-même ou un lien, un bouton, un champ qu'elle contient : :focus-within) ou qu'on la touche du doigt, le trait passe en #a78bfa, monte à 4 px et prend une lueur drop-shadow de 6 px. Le toucher est géré par un petit script (0,8 Ko) qui pose la classe dsm-on au pointerdown d'un doigt ou d'un stylet et la retire au toucher suivant ailleurs dans la page.
Accessibilité
- Décor muet : le SVG porte
aria-hidden="true"etfocusable="false"; seul le contenu de la boîte est lu. - Clavier : la boîte de la démo est une
<div>, elle ne reçoit donc pas le focus. Donnez la classedsm-boxà un<a href>ou à un<button>, ou placez-en un dedans : Tab allume alors le trait, et un contour de 2 px à 6 px de distance s'ajoute au:focus-visiblede la boîte elle-même. Sur Safari macOS, Tab saute les liens tant que le réglage du système ne l'autorise pas (Option+Tab les atteint). - Toucher : un appui du doigt allume le cadre (classe
dsm-on) jusqu'au prochain appui ailleurs, y compris dans WebKit où le survol n'existe pas. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les tirets s'arrêtent net ; le cadre reste visible et change toujours de couleur à l'état actif. - Limite : hors de ce réglage, le défilement ne s'arrête jamais et n'a pas de bouton pause. Réservez-le à un ou deux éléments par écran.
Compatibilité navigateur
SVG et CSS (pointillés, animation de stroke-dashoffset, variables CSS), plus 0,8 Ko de JavaScript pour le toucher (Pointer Events : Chrome 55, Firefox 59, Safari 13). prefers-reduced-motion : Chrome 74, Firefox 63, Safari 10.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies dont la 2e survolée seule, boîte passée à 320×160 avec un tracé de 317×157, focus clavier par un lien, toucher, 390 px sans débordement, mouvement réduit sans aucune animation en cours, 0 erreur.
Sans JavaScript : tout fonctionne sauf l'état actif au doigt sur une boîte qui n'est ni un lien ni un bouton. Sans prefers-reduced-motion (navigateurs anciens), les tirets défilent toujours.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0766-root">
<div class="dsm-box">
<svg class="dsm-svg" aria-hidden="true" focusable="false">
<rect class="dsm-rect" width="100%" height="100%" rx="12" ry="12"></rect>
</svg>
…
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur des tirets (CSS — --dsm-color) |
#6366f1 |
Teinte du cadre au repos, réglée sur .fx-0766-root ou sur un parent. |
Couleur active (CSS — --dsm-color-active et --dsm-glow) |
#a78bfa et rgba(99, 102, 241, .6) |
Couleur du trait et de sa lueur au survol, au focus et au toucher. |
Vitesse (CSS — --dsm-speed) |
1.5s |
Durée d'un cycle de 40 px. Plus la valeur est grande, plus la marche est lente. |
Fond de la boîte (CSS — --dsm-fill) |
#0a0a0f |
Remplit l'intérieur du cadre, sous le texte blanc. Mettez transparent pour encadrer une image ou une zone de la page (comme le rectangle de sélection de l'exemple), et donnez alors au texte une couleur lisible sur ce fond. |
Motif (CSS — stroke-dasharray de .dsm-rect et @keyframes dsm-march) |
12, 8 et -40 |
Longueur du tiret et du vide. Gardez dans l'animation un multiple de leur somme (ex. 6, 6 et -24) pour une boucle sans saut. |
Taille de la boîte (CSS — width / height de .dsm-box) |
200 px de large, 120 px de haut au moins | Toute taille fonctionne : le rectangle à 100 % suit la boîte. |
Arrondi (HTML — rx / ry du <rect>, CSS — border-radius) |
12 px | Changez les deux ensemble ; rx="0" donne des angles droits. |
État actif forcé (HTML — classe dsm-on sur .dsm-box) |
absente | Allume le cadre en permanence, par exemple pour l'élément sélectionné. Le script ne retire que la classe qu'il a posée lui-même au toucher. |
FAQ
<rect> mesure 100 % d'un SVG calé en CSS sur la boîte, en retrait de la moitié du trait. Une boîte qui s'allonge avec son texte, passe en pleine largeur sur mobile ou s'anime en taille garde un contour exact. Si vous changez l'épaisseur du trait, ajustez le retrait (top, left et les deux calc() de .dsm-svg) à la moitié de la nouvelle valeur.pathLength="400" au <rect> (Chrome 57, Firefox 61, Safari 14) : le motif se répartit alors en 20 pas égaux, quelle que soit la taille (les tirets s'allongent sur une grande boîte).dsm-box directement au <a> de la carte (ou à un <button>), gardez le SVG en premier enfant et mettez votre contenu après. Le survol, le focus clavier et l'appui du doigt allument alors le même état, et la carte reste un vrai lien pour les lecteurs d'écran. Une racine .fx-0766-root par carte : le script du toucher ne prend que la première boîte de chaque racine.
