CSS Animasyonlu Degrade Kenarlık Oluşturucu

Dönen bir gökkuşağı kenarlığı, CSS'de gerçekten bir tane oluşturmaya çalışana kadar basit görünür: conic-gradient() içindeki bir açıyı düz bir özel özellikle canlandırmak yararlı hiçbir şey yapmaz, çünkü tarayıcının değerin bir açı olduğu hakkında hiçbir fikri yoktur ve 0 derece ile 360 derece arasında enterpolasyon yapamaz - sadece atlar. Bu oluşturucu gerçek düzeltme olan CSS Özellikleri ve Değerler API'sini kullanır: `@property --border-angle { sözdizimi: '<angle>'; başlangıç ​​değeri: 0 derece; miras alır: yanlış; }`, tarayıcıya özel özelliğin tam olarak ne tür bir değere sahip olduğunu söyler; bu, @keyframes kuralı boyunca sorunsuz, GPU dostu enterpolasyonun kilidini açar.

Halkanın kendisi, kutudan daha büyük boyutlu bir ::before sözde elemanıdır (kenarlık genişliği eksi eklenmiş) ve arka planı 'conic-gradient(from var(--border-angle), ...)' olarak ayarlanmıştır ve ilk renge geri dönmektedir, böylece taramanın görünür bir ek yeri yoktur. Daha sonra gerçek şekillendirme işini bir maske yapar: `mask: lineer-gradient(#000 0 0) content-box, lineer-gradient(#000 0 0); maske-bileşik: hariç tutma;' yalnızca dolgu kutusu ile içerik kutusu arasındaki halka şeklindeki farkı korur ve diğer her yerde düz degrade dikdörtgeni atar. Safari'nin eski `-webkit-mask-composite: xor`'u aynı işlemi gerçekleştirir ve standart özellik ile birlikte gönderilir, böylece efekt tek bir motorda sessizce başarısız olmak yerine tutarlı bir şekilde işlenir.

Kenarlık yarıçapı desteği sonradan akla gelen bir düşünce değildir; sözde elemanın "sınır yarıçapı: miras", kutuya çevirdiğiniz yarıçapın otomatik olarak halkaya taşınacağı anlamına gelir, böylece hap şeklindeki bir düğme veya yuvarlak bir kart, kavisli köşelerden taşan düz kenarlar yerine yuvarlatılmış, parlak bir kenarlığa sahip olur. Canlı olarak test edin: Yarıçap kaydırıcısını keskin bir dikdörtgenden dolu bir hapa sürükleyin ve halkanın her adımda şekli takip etmesini izleyin; bu, bu tekniğin gerçek uygulamasını sahte bir ekran görüntüsünden ayıran ayrıntıdır.

Sayfadaki diğer her şey doğrudan oluşturulan kodla eşleşir: genişlik kaydırıcısı halkanın kalınlığı ve sözde öğenin iç metni/dolgusudur, süre kaydırıcısı @keyframes animasyon süresidir, yön anahtarı yalnızca anahtar karenin bitiş açısının işaretini çevirir (+360 derece veya -360 derece) ve her renk durağı conic-gradient() çağrısı içinde virgülle ayrılmış bir giriştir. Her şey tarayıcınızda resim olmadan, JavaScript tabanlı animasyon döngüsü olmadan ve harici hizmet olmadan çalışır; CSS bloğunu kopyalayın ve yapıştırdığınız her yerde dönmeye devam eder.