CSS-animoitu gradienttireunusgeneraattori

Pyörivä sateenkaarireunus näyttää yksinkertaiselta, kunnes yrität rakentaa sellaisen CSS:ssä: kulman animointi conic-gradient():n sisällä tavallisella mukautetulla ominaisuudella ei tee mitään hyödyllistä, koska selaimella ei ole aavistustakaan, että arvo on kulma, eikä se voi interpoloida 0-360 asteen välillä – se vain hyppää. Tämä generaattori käyttää oikeaa korjausta, CSS Properties and Values ​​API:ta: `@property --border-angle { syntaksi: '<kulma>'; alkuarvo: 0deg; perii: epätosi; }` kertoo selaimelle tarkalleen, millaista arvoa mukautetulla ominaisuudella on, mikä avaa sujuvan, grafiikkasuorittimelle ystävällisen interpoloinnin @keyframes-säännön yli.

Itse rengas on ::beforen pseudoelementti, joka on kooltaan suurempi kuin laatikko (lisätty miinus reunan leveydestä), ja sen tausta on asetettu arvoon "conic-gradient(from var(--border-angle), ...)", joka kiertää takaisin ensimmäiseen väriin, joten pyyhkäisyssä ei ole näkyvää saumaa. Sitten maski tekee todellisen muotoilutyön: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maski-komposiitti: jättää pois;` säilyttää vain renkaan muotoisen eron täytelaatikon ja sisältölaatikon välillä ja hylkää kiinteän liukukulman kaikkialla muualla. Safarin vanhempi "-webkit-mask-composite: xor" suorittaa identtisen toiminnon ja toimitetaan vakioominaisuuden rinnalla, joten tehoste toistuu johdonmukaisesti eikä epäonnistuisi äänettömästi yhdellä moottorilla.

Reunasäteen tuki ei ole jälkikäteen pultattu päälle - pseudoelementin "reunasäde: inherit" tarkoittaa, että mikä tahansa säde, jonka valitset laatikkoon, siirtyy renkaaseen automaattisesti, joten pillerimäinen painike tai pyöristetty kortti saa pyöristetyn hehkuvan reunuksen kaarevista kulmista vuotavien suorien reunojen sijaan. Testaa sitä livenä: vedä säteen liukusäädin terävästä suorakulmiosta täyteen pilleriin ja katso, kuinka rengas seuraa muotoa joka vaiheessa, mikä on yksityiskohta, joka erottaa tämän tekniikan todellisen toteutuksen väärennetystä kuvakaappauksesta.

Kaikki muu sivulla liittyy suoraan luotuun koodiin: leveysliukusäädin on renkaan paksuus ja pseudoelementin lisäys/täyte, keston liukusäädin on @keyframes-animaatio-kesto, suuntakytkin vain kääntää avainkehyksen loppukulman merkin (+360 astetta tai -360 astetta) ja jokainen väripysäytys on con-seicparated com-dient the(seicparated). Koko homma toimii selaimessasi ilman kuvia, JavaScript-pohjaista animaatiosilmukkaa tai ulkoisia palveluita – kopioi CSS-lohko ja se pyörii minne tahansa liität sen.