Générateur de bordure de dégradé animé CSS

Une bordure arc-en-ciel rotative semble simple jusqu'à ce que vous essayiez d'en créer une en CSS : animer un angle à l'intérieur de conic-gradient() avec une simple propriété personnalisée ne fait rien d'utile, car le navigateur n'a aucune idée que la valeur est un angle et ne peut pas interpoler entre 0deg et 360deg - cela saute simplement. Ce générateur utilise le vrai correctif, l'API CSS Properties and Values : `@property --border-angle { syntax: '<angle>'; valeur initiale : 0deg ; hérite : faux ; }` indique au navigateur exactement le type de valeur que détient la propriété personnalisée, ce qui permet une interpolation fluide et conviviale pour le GPU à travers une règle @keyframes.

L'anneau lui-même est un pseudo-élément ::before de taille plus grande que la boîte (encarté de moins la largeur de la bordure) avec son arrière-plan défini sur `conic-gradient(from var(--border-angle), ...)` revenant à la première couleur afin que le balayage n'ait aucune couture visible. Un masque effectue alors le véritable travail de mise en forme : `mask: Linear-gradient(#000 0 0) content-box, Linear-gradient(#000 0 0); mask-composite:exclus;` conserve uniquement la différence en forme d'anneau entre la zone de remplissage et la zone de contenu, en supprimant le rectangle de dégradé solide partout ailleurs. L'ancien `-webkit-mask-composite: xor` de Safari effectue l'opération identique et est livré avec la propriété standard, de sorte que l'effet est rendu de manière cohérente plutôt que d'échouer silencieusement sur un moteur.

La prise en charge du rayon de bordure n'est pas une réflexion secondaire - le « border-radius : hériter » du pseudo-élément signifie que le rayon que vous composez dans la boîte est automatiquement transféré sur l'anneau, de sorte qu'un bouton en forme de pilule ou une carte arrondie obtient une bordure lumineuse arrondie au lieu de bords droits qui saignent des coins incurvés. Testez-le en direct : faites glisser le curseur de rayon d'un rectangle pointu vers une pilule pleine et regardez l'anneau suivre la forme à chaque étape, ce qui est le détail qui sépare une véritable mise en œuvre de cette technique d'une fausse capture d'écran.

Tout le reste de la page correspond directement au code généré : le curseur de largeur correspond à l'épaisseur de l'anneau et à l'encart/remplissage du pseudo-élément, le curseur de durée correspond à la durée de l'animation @keyframes, le commutateur de direction inverse simplement le signe de l'angle de fin de l'image clé (+360deg ou -360deg), et chaque arrêt de couleur est une entrée séparée par des virgules à l'intérieur de l'appel conic-gradient(). Le tout s'exécute dans votre navigateur sans images, sans boucle d'animation basée sur JavaScript et sans services externes : copiez le bloc CSS et il continue de tourner partout où vous le collez.