CSS Animeret Gradient Border Generator

En roterende regnbuekant ser simpel ud, indtil du rent faktisk prøver at bygge en i CSS: At animere en vinkel inde i conic-gradient() med en almindelig tilpasset egenskab gør intet nyttigt, fordi browseren ikke aner, at værdien er en vinkel og kan ikke interpolere mellem 0deg og 360deg - den hopper bare. Denne generator bruger den rigtige rettelse, CSS Properties and Values ​​API: `@property --border-angle { syntaks: '<vinkel>'; initial-værdi: 0deg; arver: falsk; }` fortæller browseren præcis, hvilken slags værdi den tilpassede egenskab har, hvilket er det, der låser op for glat, GPU-venlig interpolation på tværs af en @keyframes-regel.

Selve ringen er et ::before pseudo-element, der er større end boksen (indsat af minus kantbredden) med baggrunden sat til `conic-gradient(from var(--border-angle), ...)`, der går tilbage til den første farve, så sweep ikke har nogen synlig søm. En maske udfører derefter det rigtige formningsarbejde: `maske: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` beholder kun den ringformede forskel mellem polstringsboksen og indholdsboksen, og kasserer det solide gradientrektangel alle andre steder. Safaris ældre `-webkit-mask-composite: xor` udfører den identiske operation og sendes sammen med standardegenskaben, så effekten gengives konsekvent i stedet for at svigte lydløst på én motor.

Border-radius støtte er ikke en eftertanke boltet ovenpå - pseudo-elementets `border-radius: herit` betyder, at den radius du ringer ind i boksen automatisk føres ind på ringen, så en pilleformet knap eller et afrundet kort får en afrundet glødende kant i stedet for lige kanter, der bløder ud af buede hjørner. Test det live: Træk radiusskyderen fra et skarpt rektangel til en hel pille, og se ringen følge formen ved hvert trin, som er den detalje, der adskiller en ægte implementering af denne teknik fra et falsk skærmbillede.

Alt andet på siden kortlægges direkte på den genererede kode: Breddeskyderen er ringens tykkelse og pseudo-elementets indsættelse/polstring, varighedsskyderen er @keyframes animation-varighed, retningsomskifteren vender bare tegnet på keyframens endevinkel (+360deg eller -360deg, eller -360deg inde i hver farve er en- og 360deg), conic-gradient() kald. Det hele kører i din browser uden billeder, ingen JavaScript-drevet animationsløkke og ingen eksterne tjenester - kopier CSS-blokken, og den bliver ved med at snurre, hvor end du indsætter den.