CSS Animált Gradiens Border Generator

A forgó szivárványszegély egészen addig egyszerűnek tűnik, amíg meg nem próbál egyet létrehozni CSS-ben: a conic-gradient()-en belüli szög animálása egy egyszerű egyéni tulajdonsággal semmi hasznot nem hoz, mert a böngészőnek fogalma sincs, hogy az érték szög, és nem tud 0 és 360 fok között interpolálni – csak ugrik. Ez a generátor a valódi javítást, a CSS Properties and Values ​​API-t használja: `@property --border-angle { syntax: '<angle>'; kezdeti érték: 0deg; örököl: hamis; A }` pontosan megmondja a böngészőnek, hogy az egyéni tulajdonság milyen értéket tartalmaz, ami feloldja a sima, GPU-barát interpolációt a @keyframes szabályon keresztül.

Maga a gyűrű egy ::before pszeudoelem, amelynek mérete nagyobb, mint a doboz (beszúrva mínusz a szegély szélessége), a háttere `conic-gradient(from var(--border-angle), ...)`-ra van állítva, és visszahurkolódik az első színre, így a sweepnek nincs látható varrata. Ezután egy maszk elvégzi az igazi alakító munkát: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maszk-kompozit: kizárja;` csak a gyűrű alakú különbséget tartja meg a padding-box és a content-box között, mindenhol máshol elveti a szilárd színátmenetes téglalapot. A Safari régebbi `-webkit-mask-comosite: xor`-ja ugyanazt a műveletet hajtja végre, és a szabványos tulajdonsággal együtt szállítja, így a hatás konzisztensen jelenik meg, nem pedig csendben egy motoron.

A szegélysugár támogatása nem egy utólagos felcsavarozás – az álelem „border-radius: inherit” azt jelenti, hogy a dobozba tárcsázott bármely sugár automatikusan rákerül a gyűrűre, így egy pirula alakú gomb vagy egy lekerekített kártya lekerekített, fénylő szegélyt kap az ívelt sarkokból kivérző egyenes élek helyett. Tesztelje élőben: húzza a sugárcsúszkát egy éles téglalapról a teljes pillére, és nézze meg, hogy a gyűrű minden lépésnél követi az alakzatot, ami az a részlet, amely elválasztja ennek a technikának a valódi megvalósítását a hamis képernyőképtől.

Az oldalon minden más közvetlenül a generált kódra van leképezve: a szélesség csúszka a gyűrű vastagsága és az álelem beillesztése/kitöltése, az időtartam csúszkája a @keyframes animáció-időtartam, az irányváltó csak a kulcskocka végszögének jelét forgatja (+360 fok vagy -360 fok), és minden színmegálló a (seicparated) com-dient bemenetet jelenti. Az egész a böngészőben fut képek, JavaScript-vezérelt animációs hurok és külső szolgáltatások nélkül – másolja ki a CSS-blokkot, és az tovább pörög, ahová beilleszti.