CSS ile Kesikli Kenarlığa Nasıl Animasyon Verilir

Dekore edilmiş kenarlıklar sayfadaki herhangi bir öğeyi süsleyebilir, ancak stil söz konusu olduğunda CSS kenarlıkları sınırlıdır. Geliştiriciler sık ​​sık, kutu kenarlıklarının görünümlerini ve animasyonlarını taklit etmek ve yükseltmek için CSS gradyan sınırları, SVG sınırları, çoklu sınırlar ve daha fazlası gibi çözümlerle geliyorlar..

Bugün kesikli sınırlar için daha basit bir kesmeye bakacağız: kesikli sınır animasyonu. Animasyonlu çizgili kenar yalnızca taslak ve kutu gölge, geri dönüşlerle ilgili hiçbir sıkıntı bırakmak, taslak IE8'den itibaren desteklenir. Bu şekilde kullanıcı, SVG veya gradyan kullanıldığında farklı olarak sınırları görmeye devam eder. Bununla bicolored çizgiler de oluşturabilirsiniz. Hadi bir bakalım.

Sınırları Yaratmak

Önce sınırları oluşturacağız. Bunun için kesikli bir taslak ve bir kutu gölgesi kullanacağız.

 .afiş taslak: 6 piksel sarı çizgili; kutu-gölge: 0 0 0 6px # EA3556;… 

taslak tüm değerlerine ihtiyaç duyacak; genişlik, tür ve renk. kutu gölge sadece değerine ihtiyaç duyar YAYILMIŞ anahattın genişliği ve rengi ile aynı olmalıdır. Hem anahat hem de kutu gölgesi birlikte iki renkli çizgi efekti oluşturur.

Ardından köşelere istediğiniz kenarlık görünümü için kutunun genişliğini veya yüksekliğini ayarlayabilirsiniz..

Sınırları Animasyon

İlk animasyon örneğimizde, kenarlıklı olarak sürekli hareket eden ve dikkat çeken bir dizi afişe CSS ana kare animasyonları ekleyeceğiz. Animasyon efekti için sadece anahat ve kutu gölgesinin renklerini değiştireceğiz..

@keyframes animateBorder - outline-color: # EA3556; kutu-gölge: 0 0 0 6 piksel sarı; 

Anahat rengini kullanarak hedef anahat renkli longhand özelliği, ancak kutu gölge için şimdilik tüm değerleri shorthand özelliğine vermeniz gerekecek.

Animasyon hazır olduğunda, kutuya ekleyin.

.afiş taslak: 6 piksel sarı çizgili; kutu-gölge: 0 0 0 6px # EA3556; animasyon: 1s animateBorder sonsuz;…

Sınırlardaki Geçişler

Geçiş örneği için, resimlere kenarlıklar ekleyip vurgulu olanlara animasyon uygulayacağız. Farklı efektler için kenarlık boyutunu da değiştirebilirsiniz..

.fotoğraflar outline: 20px dashed # 006DB5; kutu-gölge: 0px 0px 0px 20px # 3CFDD3; geçiş: tüm 1'ler;… .photos: hover outline-color: # 3CFDD3; kutu-gölge: 0 0 0 20px # 006DB5; 

Şimdi, CSS'inizin sınırlarını tüm hareketli görkemiyle görmek için bu resimlerin üzerine gelin.

Ve bu bir şal. Kesikli kenarlıkları noktalı olanlarla değiştirmeyi deneyebilirsiniz, ancak bu etki asal olarak iyi olmayabilir. Anahat türünü animasyon sırasında birkaç efekt daha için değiştirebilirsiniz..