Generatore di bordi sfumati animati CSS

Un bordo arcobaleno rotante sembra semplice finché non provi a costruirne uno in CSS: animare un angolo all'interno di conic-gradient() con una semplice proprietà personalizzata non fa nulla di utile, perché il browser non ha idea che il valore sia un angolo e non può interpolare tra 0 gradi e 360 gradi — salta e basta. Questo generatore utilizza la vera soluzione, l'API CSS Properties and Values: `@property --border-angle { syntax: '<angle>'; valore iniziale: 0deg; eredita: falso; }` indica al browser esattamente il tipo di valore della proprietà personalizzata, che è ciò che sblocca un'interpolazione fluida e compatibile con la GPU attraverso una regola @keyframes.

L'anello stesso è uno pseudo-elemento ::before di dimensioni più grandi del riquadro (inserito meno la larghezza del bordo) con il suo sfondo impostato su `conic-gradient(from var(--border-angle), ...)` che ritorna al primo colore in modo che lo sweep non abbia cuciture visibili. Una maschera quindi svolge il vero lavoro di modellatura: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maschera-composita: esclude;` mantiene solo la differenza a forma di anello tra il riquadro di riempimento e il riquadro di contenuto, scartando il rettangolo del gradiente solido ovunque. Il vecchio `-webkit-mask-composite: xor` di Safari esegue la stessa operazione e viene fornito insieme alla proprietà standard, quindi l'effetto viene visualizzato in modo coerente anziché fallire silenziosamente su un motore.

Il supporto del raggio del bordo non è un ripensamento imbullonato in cima: il "raggio del bordo: eredita" dello pseudo-elemento significa che qualunque raggio inserisci nella casella viene trasferito automaticamente sull'anello, quindi un pulsante a forma di pillola o una carta arrotondata ottiene un bordo arrotondato luminoso invece di bordi dritti che fuoriescono dagli angoli curvi. Provalo dal vivo: trascina il cursore del raggio da un rettangolo acuto a una pillola intera e osserva l'anello seguire la forma ad ogni passaggio, che è il dettaglio che separa un'implementazione reale di questa tecnica da uno screenshot falso.

Tutto il resto della pagina viene mappato direttamente sul codice generato: il cursore della larghezza è lo spessore dell'anello e l'inserto/imbottitura dello pseudo-elemento, il cursore della durata è la durata dell'animazione @keyframes, l'interruttore di direzione inverte semplicemente il segno dell'angolo finale del fotogramma chiave (+360 gradi o -360 gradi) e ogni arresto del colore è una voce separata da virgole all'interno della chiamata conic-gradient(). Il tutto viene eseguito nel tuo browser senza immagini, senza loop di animazione basati su JavaScript e senza servizi esterni: copia il blocco CSS e continuerà a girare ovunque lo incolli.