CSS-animoitu reunagradienttigeneraattori

Pyörivä sateenkaarireunus vaikuttaa yksinkertaiselta, kunnes yrität rakentaa sellaisen CSS:llä: kulman animointi conic-gradient()-funktion sisällä tavallisella mukautetulla ominaisuudella ei tee mitään hyödyllistä, koska selain ei tiedä arvon olevan kulma eikä osaa interpoloida 0deg:n ja 360deg:n välillä – se vain hyppää. Tämä generaattori käyttää aitoa korjausta, CSS Properties and Values -rajapintaa: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` kertoo selaimelle tarkalleen, minkä tyyppisen arvon mukautettu ominaisuus sisältää, mikä mahdollistaa sulavan, näytönohjainystävällisen interpoloinnin @keyframes-säännössä.

Itse rengas on ::before-pseudoelementti, joka on mitoitettu laatikkoa suuremmaksi (sisennettynä reunuksen leveyden verran negatiivisesti) ja jonka taustaksi on asetettu `conic-gradient(from var(--border-angle), ...)` palaten takaisin ensimmäiseen väriin, jotta pyyhkäisyssä ei ole näkyvää saumaa. Maski tekee sitten varsinaisen muotoilutyön: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` pitää vain renkaan muotoisen erotuksen padding-boxin ja content-boxin välillä ja hylkää kiinteän gradienttisuorakaiteen kaikkialla muualta. Safarin vanhempi `-webkit-mask-composite: xor` suorittaa saman operaation ja toimitetaan standardiominaisuuden rinnalla, joten efekti piirtyy johdonmukaisesti eikä epäonnistu hiljaa yhdellä selainmoottorilla.

Border-radius-tuki ei ole jälkikäteen päälle liimattu lisäosa – pseudoelementin `border-radius: inherit` tarkoittaa, että mikä tahansa pyöristys, jonka säädät laatikolle, periytyy automaattisesti renkaalle, joten pillerinmuotoinen painike tai pyöristetty kortti saa pyöristetyn hehkuvan reunuksen suorien reunojen sijaan, jotka vuotaisivat ulos kaarevista kulmista. Testaa sitä livenä: vedä pyöristyssäteen liukusäädintä terävästä suorakulmiosta täyteen pilleriin ja katso, kuinka rengas seuraa muotoa joka askeleella – tämä yksityiskohta erottaa tämän tekniikan aidon toteutuksen väärennetystä kuvakaappauksesta.

Kaikki muu sivulla kuvautuu suoraan luotuun koodiin: leveysliukusäädin on renkaan paksuus ja pseudoelementin sisennys/täyte, nopeusliukusäädin on @keyframes-animaation kesto, suuntakytkin vain kääntää avainruudun loppukulman etumerkin (+360deg tai -360deg), ja jokainen väripysäytys on pilkulla erotettu merkintä conic-gradient()-kutsun sisällä. Koko homma pyörii selaimessasi ilman kuvia, ilman JavaScript-pohjaista animaatiosilmukkaa ja ilman ulkoisia palveluita – kopioi CSS-lohko, ja se jatkaa pyörimistään minne tahansa sen liitätkin.