CSS kenarlık animasyonları

sınırları ayarlama #

Bir öğeye kenarlık ayarlamak için kullanılabilecek birkaç yöntem vardır: border, outlineVe box-shadow. ayrıntılı olarak Öğe Kenarlıkları Eklemek için 3 CSS Yöntemi Stephanie Eckles tarafından yazılan, her yaklaşımın kendi avantajları ve dezavantajları vardır – özellikle de sınırları canlandırmak söz konusu olduğunda. Uygun bir CSS kullanmamanın ana nedeni border animasyon amaçlıdır.

Geçenlerde dikkatimi çeken bir yazı Fantastik CSS kenarlık animasyonu, yazar Coco’nun daha fazla seçenek keşfettiği yer. enjekte ederek oluşturulan içerik kullanarak ::before Ve ::after daha sonra canlandırılan sahte bir kenarlık oluştururlar.

Benim için en çok öne çıkan şey, makalede kullanılan destekleyici animasyonlu görselleştirmeler. İstenilen etkiyi elde etmek için tam olarak ne yapıldığını açıklamaya gerçekten yardımcı olurlar.

Hem beyaz katman hem de renkli çizgiler oluşturulmuş içeriktir. Beyaz katmanı içeri ve dışarı soyarak, nasıl yığıldıkları ve animasyonun nasıl çalıştığı netleşir.

Kutu modelini tutma #

Bir sınırı taklit etmek için Oluşturulmuş İçeriği kullanmanın bir dezavantajı, bozuk bir kenarla sonuçlanmanızdır. kutu modeli: söz konusu “kenarlık” alta boyandığından içerik artık sahte sınırı gizleyebilir. Hafifletmek için, istenenleri uygulamanız gerekir. border-width olarak padding.

Gerçek bir kenarlığa sahip olmak ve böylece kutu modelinin işleyişini korumak için kullanabilirsiniz çoklu arka planlar daha sonra sınır alanına doğru uzanırsınız.

Temeller #

Noktalı bir kenarlık oluşturarak ve çoklu arka planları ekleyerek başlayalım.

/* Size of the border */
--border-size: 0.5rem;
/* Create a dotted border */
border: var(--border-size) dotted lime;
/* Create two background layers:
1. A white semi-transparent
2. A layer with the colored boxes
*/
background-image:
linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),
conic-gradient(
from 45deg,
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
)
;

ile arka planı boyutlandırma background-origin #

Gördüğünüz gibi, buradaki arka planlarla ilgili komik bir şeyler oluyor: kenarlara boyanmışlar, ancak arka planlar conic-gradient hepsi yanlış gibi görünüyor. Bu aslında amaçlanan bir davranıştır: varsayılan olarak arka plan resimleri kenarlığın içine çekilmez, çünkü kökenleri padding-box öğenin. Sonuçta bir kenarlık oluşturmak için, ayarlanan arka plan görüntüleri kenarlığın kendisinde tekrarlanarak garip görsel efekt elde edilir.

Bu sorunu çözmek için, arka planı kenarlığın boyutunu da kaplayacak şekilde uzatmanız gerekir. Bunu, arka planı uzatarak ve yeniden konumlandırarak manuel olarak yapabilirsiniz, ancak en iyisi background-origin arka planı boyutlandırma özelliği border-box.

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

Bu bir ekleme, her şeyin çok daha iyi görünmesini sağlar:

Beyaz arka plan katmanını küçültme background-clip #

Arka planlar artık tüm alanı kapladığından, yarı saydam katmanın tekrar küçültülmesi gerekiyor. uğraşmak yerine background-size yine, bunu yapmanın daha kolay bir yolu var: kullanmak background-clip ve ayarla padding-box. Bu şekilde, arka plan artık sınır alanının altına çizilmez.

background-clip:
padding-box, /* Clip white semi-transparent to the padding-box */
border-box /* Clip colored boxes to the border-box (default) */
;

Son olarak, sınırı yapın transparent tam etkiye sahip olmak için.

border: 0.3rem dotted transparent;

Animasyon #

Kenarlığın animasyonunu geri yüklemek için kenarlığın başlangıç ​​açısını değiştirebilirsiniz. conic-gradient.

--angle: 0deg;
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
);

@property sayesinde, onu destekleyen tarayıcılarda bu çok kolay hale gelir:

@property --angle {
syntax: "&LTangle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}

Hepsi birleştiğinde, kod şu hale gelir:

Bonus İçeriği: border-image #

Degrade kenarlık çizmek için daha önce ele alınan bir yaklaşım, CSS kullanmaktır. border-image.

Çakışan arka planlarla uğraşmanız gerekmediğinden daha basitleştirilmiş koda izin verir. Animasyon öncekiyle aynı şekilde uygulanabilir.

/* Create a border */
border: 0.5rem solid transparent;
/* Paint an image in the border */
border-image:
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
) 1
;

Ancak, birkaç şeyin artık bu yaklaşımla çalışmadığını fark edeceksiniz:

• bu border-image takip etmiyor border-radius; her zaman dikdörtgen kalacaktır.
• ayarlarken border-image-slice doldurmak, border-image setin altında boyalı değil background ama üstte. Arka planın yarı saydam olmasını istiyorsanız bu zahmetli olabilir.

kapanışta #

CSS’de sınırları canlandırmak için çok sayıda olasılık vardır. Kullanım durumuna bağlı olarak, birine veya diğerine yaslanabilirsiniz.