CSS Animált Színátmenetes Szegély Generátor

Egy forgó szivárvány szegély egyszerűnek tűnik, amíg meg nem próbálod CSS-ben megépíteni: egy szög animálása a conic-gradient()-ben egy sima egyéni tulajdonsággal semmi hasznosat nem eredményez, mert a böngésző nem tudja, hogy az érték egy szög, és nem tud interpolálni 0deg és 360deg között – csak ugrik. Ez a generátor a valódi megoldást használja, a CSS Properties and Values API-t: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` pontosan megmondja a böngészőnek, milyen típusú értéket tárol az egyéni tulajdonság, ami lehetővé teszi az egyenletes, GPU-barát interpolációt egy @keyframes szabályon keresztül.

Maga a gyűrű egy ::before pszeudo-elem, amely nagyobbra van méretezve a doboznál (a szegélyvastagság mínusz értékével beljebb húzva), és a háttere `conic-gradient(from var(--border-angle), ...)`-re van állítva, visszahurkolva az első színhez, hogy a söprésnek ne legyen látható illesztése. Ezután egy maszk végzi a tényleges formázást: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` csak a gyűrű alakú különbséget tartja meg a padding-box és a content-box között, eldobva a tömör színátmenetes téglalapot mindenhol máshol. A Safari régebbi `-webkit-mask-composite: xor` tulajdonsága ugyanazt a műveletet hajtja végre, és a szabványos tulajdonság mellett érkezik, így a hatás következetesen jelenik meg ahelyett, hogy csendesen meghibásodna egy motoron.

A border-radius támogatás nem utólagosan hozzáadott toldozás – a pszeudo-elem `border-radius: inherit` tulajdonsága azt jelenti, hogy bármilyen sugarat állítasz be a dobozon, az automatikusan átkerül a gyűrűre, így egy pirula alakú gomb vagy egy lekerekített kártya lekerekített izzó szegélyt kap, nem pedig egyenes éleket, amelyek kifolynak az ívelt sarkokból. Teszteld élőben: húzd a sugár csúszkát egy éles téglalaptól egy teljes piruláig, és nézd, ahogy a gyűrű minden lépésnél követi a formát, ez az a részlet, ami elválasztja ennek a technikának a valódi megvalósítását egy hamis képernyőképtől.

Az oldalon minden más közvetlenül leképeződik a generált kódra: a vastagság csúszka a gyűrű vastagsága és a pszeudo-elem inset/padding értéke, az időtartam csúszka a @keyframes animation-duration, az irányváltó egyszerűen megfordítja a kulcsképkocka végszögének előjelét (+360deg vagy -360deg), és minden színpont egy vesszővel elválasztott bejegyzés a conic-gradient() hívásban. Az egész a böngésződben fut, képek, JavaScript-vezérelt animációs hurok és külső szolgáltatások nélkül – másold ki a CSS blokkot, és tovább forog, bárhová is illeszted be.