Generador de bordes degradados animados CSS

Un borde de arco iris giratorio parece simple hasta que intentas construir uno en CSS: animar un ángulo dentro de conic-gradient() con una propiedad personalizada simple no hace nada útil, porque el navegador no tiene idea de que el valor es un ángulo y no puede interpolar entre 0 grados y 360 grados; simplemente salta. Este generador utiliza la solución real, la API de valores y propiedades CSS: `@property --border-angle { syntax: '<angle>'; valor inicial: 0 grados; hereda: falso; }` le dice al navegador exactamente qué tipo de valor tiene la propiedad personalizada, que es lo que desbloquea una interpolación fluida y compatible con GPU a través de una regla @keyframes.

El anillo en sí es un pseudoelemento ::before de tamaño mayor que el cuadro (insertado por menos el ancho del borde) con su fondo establecido en `conic-gradient(from var(--border-angle), ...)` volviendo al primer color para que el barrido no tenga una costura visible. Luego, una máscara hace el trabajo de configuración real: `máscara: gradiente lineal (#000 0 0) cuadro de contenido, gradiente lineal (#000 0 0); máscara-compuesta: excluir;` mantiene solo la diferencia en forma de anillo entre el cuadro de relleno y el cuadro de contenido, descartando el rectángulo degradado sólido en todos los demás. El antiguo `-webkit-mask-composite: xor` de Safari realiza la misma operación y se envía junto con la propiedad estándar, por lo que el efecto se produce de manera consistente en lugar de fallar silenciosamente en un motor.

El soporte de radio de borde no es una idea de último momento atornillada en la parte superior: el "radio de borde: heredar" del pseudoelemento significa que cualquier radio que marque en la caja se lleva al anillo automáticamente, por lo que un botón en forma de píldora o una tarjeta redondeada obtiene un borde brillante redondeado en lugar de bordes rectos que salen de las esquinas curvas. Pruébelo en vivo: arrastre el control deslizante de radio desde un rectángulo afilado hasta una pastilla completa y observe cómo el anillo sigue la forma en cada paso, que es el detalle que separa una implementación real de esta técnica de una captura de pantalla falsa.

Todo lo demás en la página se asigna directamente al código generado: el control deslizante de ancho es el grosor del anillo y el recuadro/relleno del pseudoelemento, el control deslizante de duración es la duración de la animación @keyframes, el interruptor de dirección simplemente invierte el signo del ángulo final del fotograma clave (+360 grados o -360 grados), y cada parada de color es una entrada separada por comas dentro de la llamada conic-gradient(). Todo se ejecuta en su navegador sin imágenes, sin bucles de animación basados ​​en JavaScript y sin servicios externos: copie el bloque CSS y seguirá girando dondequiera que lo pegue.