CSS-animeret gradientramme-generator

En roterende regnbuekant ser simpel ud, indtil du faktisk prøver at bygge en i CSS: at animere en vinkel inde i conic-gradient() med en almindelig custom property gør intet nyttigt, fordi browseren ikke ved, at værdien er en vinkel og kan ikke interpolere mellem 0deg og 360deg — den hopper bare. Denne generator bruger den rigtige løsning, CSS Properties and Values API'en: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` fortæller browseren præcis, hvilken type værdi den custom property indeholder, hvilket er det, der muliggør jævn, GPU-venlig interpolation over en @keyframes-regel.

Selve ringen er et ::before-pseudo-element, der er større end boksen (indsat med minus kantbredden), med baggrunden sat til `conic-gradient(from var(--border-angle), ...)`, der går tilbage til den første farve, så fejningen ingen synlig samling har. En maske udfører så det egentlige formgivningsarbejde: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` bevarer kun den ringformede forskel mellem padding-boksen og indholdsboksen og kasserer det massive gradientrektangel alle andre steder. Safaris ældre `-webkit-mask-composite: xor` udfører den identiske operation og leveres sammen med standardegenskaben, så effekten gengives konsekvent i stedet for at fejle lydløst på én motor.

Understøttelse af border-radius er ikke en eftertanke, der er boltet på — pseudo-elementets `border-radius: inherit` betyder, at uanset hvilken radius du indstiller på boksen, overføres den automatisk til 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 kurvede hjørner. Test det live: træk radius-skydekontrollen fra et skarpt rektangel til en fuld pille, og se ringen følge formen ved hvert trin — det er detaljen, der adskiller en reel implementering af denne teknik fra et falsk screenshot.

Alt andet på siden afspejles direkte i den genererede kode: bredde-skydekontrollen er ringens tykkelse og pseudo-elementets inset/padding, varigheds-skydekontrollen er @keyframes animation-duration, retningsskifteren vender blot fortegnet på keyframens slutvinkel (+360deg eller -360deg), og hver farvestop er et kommasepareret element inde i conic-gradient()-kaldet. Det hele kører i din browser uden billeder, uden JavaScript-drevet animationsløkke og uden eksterne tjenester — kopiér CSS-blokken, og den bliver ved med at dreje, hvor end du indsætter den.