CSS geanimeerde verlooprandgenerator

Een roterende regenboogrand ziet er eenvoudig uit totdat je er daadwerkelijk een probeert te bouwen in CSS: het animeren van een hoek binnen conic-gradient() met een gewone aangepaste eigenschap heeft niets nuttigs, omdat de browser geen idee heeft dat de waarde een hoek is en niet kan interpoleren tussen 0 graden en 360 graden - hij springt gewoon. Deze generator gebruikt de echte oplossing, de CSS Properties and Values ​​API: `@property --border-angle { syntaxis: '<angle>'; beginwaarde: 0 graden; erft: vals; }` vertelt de browser precies wat voor waarde de aangepaste eigenschap heeft, wat een soepele, GPU-vriendelijke interpolatie via een @keyframes-regel mogelijk maakt.

De ring zelf is een ::before pseudo-element dat groter is dan de doos (inzet minus de randbreedte) met de achtergrond ingesteld op `conic-gradient(from var(--border-angle), ...)` en terugloopt naar de eerste kleur, zodat de sweep geen zichtbare naad heeft. Een masker doet dan het echte vormgevingswerk: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: uitsluiten;` behoudt alleen het ringvormige verschil tussen de opvullingsdoos en de inhoudsdoos, waarbij de effen gradiëntrechthoek overal elders wordt weggegooid. Safari's oudere `-webkit-mask-composite: xor` voert dezelfde bewerking uit en wordt samen met de standaardeigenschap verzonden, zodat het effect consistent wordt weergegeven in plaats van stil te falen op één engine.

Randradiusondersteuning is geen bijzaak die er bovenop wordt geschroefd - de 'borderradius: inherit' van het pseudo-element betekent dat de straal die je in de doos intoetst automatisch naar de ring wordt overgebracht, dus een pilvormige knop of een ronde kaart krijgt een afgeronde, gloeiende rand in plaats van rechte randen die uit gebogen hoeken lopen. Test het live: sleep de straalschuifregelaar van een scherpe rechthoek naar een volledige pil en zie hoe de ring bij elke stap de vorm volgt, het detail dat een echte implementatie van deze techniek scheidt van een nep-screenshot.

Al het andere op de pagina komt rechtstreeks overeen met de gegenereerde code: de schuifregelaar voor de breedte is de dikte van de ring en de inzet/opvulling van het pseudo-element, de schuifregelaar voor de duur is de animatieduur van @keyframes, de richtingsschakelaar draait alleen het teken van de eindhoek van het hoofdframe om (+360 graden of -360 graden), en elke kleurstop is een door komma's gescheiden invoer binnen de aanroep conic-gradient(). Het hele ding draait in je browser, zonder afbeeldingen, zonder JavaScript-gestuurde animatielus en zonder externe services. Kopieer het CSS-blok en het blijft draaien, waar je het ook plakt.