Yalnızca CSS yükleyicileri yapmak en sevdiğim görevlerden biridir. Bu sonsuz animasyonlara bakmak her zaman tatmin edicidir. Ve tabii ki var bir sürü bunları yapmak için teknikler ve yaklaşımlar - gerek yok CodePen'den daha ileriye bakın kaç tane olduğunu görmek için. Ancak bu makalede, mümkün olduğunca az kod yazarak tek elemanlı bir yükleyicinin nasıl yapıldığını göreceğiz.
Sahibim 500'den fazla tekli div yükleyiciden oluşan bir koleksiyon yaptı ve bu dört bölümlük dizide, birçoğunu oluşturmak için kullandığım hileleri paylaşacağım. Küçük ayarlamaların eğlenceli varyasyonlara nasıl yol açabileceğini ve bunların gerçekleşmesi için ne kadar az kod yazmamız gerektiğini gösteren çok sayıda örneği ele alacağız!
Tek Elemanlı Yükleyiciler serisi:
- Tek Elemanlı Yükleyiciler: Döndürücü — Buradasınız
- Tek Elemanlı Yükleyiciler: Noktalar — 17 Haziran'da geliyor
- Tek Elemanlı Yükleyiciler: Çubuklar — 24 Haziran'da geliyor
- Tek Elemanlı Yükleyiciler: 3B'ye Geçiş — 1 Temmuz geliyor
Bu ilk makale için, daha yaygın yükleyici modellerinden birini oluşturacağız: dönen çubuklar:
İşte yaklaşım
Bu yükleyici için önemsiz bir uygulama, bir ana öğenin içine sarılmış her çubuk için bir öğe oluşturmak (toplam dokuz öğe için), ardından oynamaktır. opacity
ve transform
döndürme efekti elde etmek için.
Ancak benim uygulamam yalnızca bir öğe gerektiriyor:
<div class="loader"></div>
…ve 10 CSS bildirimi:
.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}
hadi bunu parçalayalım
İlk bakışta, kod garip görünebilir, ancak düşündüğünüzden daha basit olduğunu göreceksiniz. İlk adım, elemanın boyutunu tanımlamaktır. Bizim durumumuzda, bu bir 150px
Meydan. koyabiliriz aspect-ratio
öğenin ne olursa olsun kare kalması için kullanmak.
.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}
CSS yükleyicileri oluştururken, genel boyutu kontrol etmek için her zaman tek bir değere sahip olmaya çalışırım. Bu durumda, bu width
ve ele aldığımız tüm hesaplamalar bu değere atıfta bulunacaktır. Bu, yükleyiciyi kontrol etmek için tek bir değeri değiştirmeme izin veriyor. Çok fazla ek değer ayarlamaya gerek kalmadan yükleyicilerimizin boyutunu kolayca ayarlayabilmek her zaman önemlidir.
Ardından, çubukları oluşturmak için gradyanları kullanacağız. Bu en zor kısım! hadi kullanalım bir oluşturmak için gradyan iki aşağıdaki gibi çubuklar:
background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;
Gradyanımız bir renk ve iki renk durağı ile tanımlanır. Sonuç, solma veya geçiş olmayan düz bir renktir. Boyut eşittir 34%
geniş ve 8%
uzun. Ayrıca merkeze yerleştirilmiştir (50%
). İşin püf noktası, anahtar kelime değerinin kullanılmasıdır. space
— bu degradeyi çoğaltır ve bize toplam iki çubuk verir.
Konum şartname:
Görüntü, kırpılmadan arka plan konumlandırma alanına sığabileceği sıklıkta tekrarlanır ve ardından görüntüler alanı dolduracak şekilde aralıklı olarak dağıtılır. İlk ve son görüntüler alanın kenarlarına dokunur.
Ben eşit bir genişlik kullanıyorum 34%
bu, ikiden fazla çubuğa sahip olamayacağımız anlamına gelir (3*34%
daha büyüktür 100%
) ancak iki çubukla boş alanlarımız olacak (100% - 2 * 34% = 32%
). Bu boşluk, iki çubuk arasındaki merkeze yerleştirilir. Başka bir deyişle, arasındaki gradyan için bir genişlik kullanırız. 33%
ve 50%
aralarında biraz boşluk olan en az iki çubuğumuz olduğundan emin olmak için. Değer space
onları bizim için doğru bir şekilde yerleştiren şeydir.
Aynısını yapıyoruz ve üstte ve altta iki çubuk daha elde etmek için ikinci bir benzer gradyan yapıyoruz, bu da bize bir background
özellik değeri:
background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;
Tekrardan kaçınmak için bunu bir CSS değişkeni kullanarak optimize edebiliriz:
--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
Şimdi dört çubuğumuz var ve CSS değişkenleri sayesinde renk değerini bir kez yazabiliyoruz, bu da daha sonra güncellemeyi kolaylaştırıyor (yükleyicinin boyutunda yaptığımız gibi).
Kalan çubukları oluşturmak için .loader
eleman ve onun ::before
toplamda sekiz olmak üzere dört çubuk daha almak için sözde eleman.
.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}
kullanımına dikkat edin display: grid
. Bu, şebekenin varsayılanına güvenmemizi sağlar stretch
sözde öğenin ebeveyninin tüm alanını kaplamasını sağlamak için hizalama; böylece üzerinde bir boyut belirtmeye gerek yok - kodu azaltan ve birçok değerle uğraşmamızı engelleyen başka bir numara!
Şimdi sözde elemanı döndürelim 45deg
Kalan çubukları konumlandırmak için Hileyi görmek için aşağıdaki demoyu gezdirin:
opaklığın ayarlanması
Yapmaya çalıştığımız şey, dairesel bir yolda giderken arkasında solma çubuklarından oluşan bir iz bırakan bir çubuk olduğu izlenimini yaratmak. Şimdi ihtiyacımız olan şey, CSS ile yapacağımız bu izi yapmak için çubuklarımızın şeffaflığı ile oynamak. mask
aşağıdaki gibi bir konik gradyan ile birleştirilir:
mask: conic-gradient(from 22deg,#0003,#000);
Hileyi daha iyi görmek için bunu tam renkli bir kutuya uygulayalım:
Kırmızı rengin şeffaflığı saat yönünde giderek artmaktadır. Bunu yükleyicimize uyguluyoruz ve farklı opaklığa sahip çubuklarımız var:
Gerçekte, her çubuk bir gradyanla maskelendiği ve iki yarı saydam renk arasına düştüğü için soluyor gibi görünür. Bu çalıştığında pek fark edilmez, bu yüzden tüm çubukların aynı renge ve farklı bir opaklığa sahip olduğunu söyleyebilmek gibi bir şey.
rotasyon
Yükleyicimizi almak için bir döndürme animasyonu uygulayalım. Sürekli değil, kademeli bir animasyona ihtiyacımız olduğunu unutmayın, bu yüzden kullanıyorum steps(8)
. 8
çubukların sayısından başka bir şey değildir, bu nedenle kaç çubuk kullanıldığına bağlı olarak bu değer değiştirilebilir.
.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}
Bu kadar! Yalnızca bir eleman ve birkaç satır CSS içeren yükleyicimiz var. Bir değer ayarlayarak boyutunu ve rengini kolayca kontrol edebiliriz.
Sadece kullandığımız için ::before
sözde eleman, kullanarak dört çubuk daha ekleyebiliriz ::after
toplamda 12 çubukla ve hemen hemen aynı kodla bitecek şekilde:
Göz önünde bulundurulması için sözde öğelerimizin rotasyonunu güncelliyoruz 30deg
ve 60deg
yerine 45deg
sekiz yerine on iki adımlı bir animasyon kullanırken. Ben de yüksekliği azalttım 5%
yerine 8%
çubukları biraz daha ince yapmak için.
Sahip olduğumuza da dikkat edin grid-area: 1/1
sözde unsurlar üzerinde. Bu, onları birbiri üzerine yığılmış olarak aynı alana yerleştirmemize izin verir.
Bil bakalım ne oldu? Aynı yükleyiciye başka bir uygulama kullanarak ulaşabiliriz:
Kodun arkasındaki mantığı çözebilir misiniz? İşte bir ipucu: opaklık artık bir CSS ile ele alınmıyor mask
ancak degradenin içinde ve aynı zamanda opacity
özelliği.
Bunun yerine neden noktalar olmasın?
Bunu tamamen yapabiliriz:
Kodu kontrol ederseniz, artık doğrusal yerine radyal bir gradyan ile çalıştığımızı göreceksiniz. Aksi takdirde, maskenin opaklık izlenimi yarattığı konsept tamamen aynıdır, ancak şekilleri çizgi yerine daire şeklinde yaptık.
Aşağıda, yeni degrade yapılandırmasını gösteren bir şekil verilmiştir:
Safari kullanıyorsanız, demonun hatalı olabileceğini unutmayın. Bunun nedeni, Safari'nin şu anda at
radyal gradyanlarda sözdizimi. Ancak bunun üstesinden gelmek için gradyanı biraz yeniden yapılandırabiliriz:
.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}
Daha fazla yükleyici örneği
İşte bir öncekine benzer bir döner yükleyici için başka bir fikir.
Bunun için sadece güveniyorum background
ve mask
şekli oluşturmak için (sözde eleman gerekmez). Aynı koddan çok sayıda varyasyon oluşturabilmek için yapılandırmayı CSS değişkenleriyle de tanımlıyorum - yalnızca CSS değişkenlerinin güçlerine başka bir örnek. Bu teknik hakkında başka bir makale yazdım daha fazla ayrıntı istiyorsanız.
Bazı tarayıcıların hala bir -webkit-
için önek mask-composite
kendi değer kümesiyle ve demoda döndürücüyü göstermez. İşte bunu yapmanın bir yolu olmadan mast-composite
daha fazla tarayıcı desteği için.
Senin için bir tane daha var:
Bunun için bir kullanıyorum background-color
rengi kontrol etmek ve kullanmak için mask
ve mask-composite
son şekli oluşturmak için:
Bitirmeden önce, bir süre önce yaptığım birkaç dönen yükleyici daha var. Farklı tekniklere güveniyorum ama yine de gradyanlar, maskeler, sözde eleman vb. kullanıyorum. Aynı anda her birinin mantığını çözmek ve yeni numaralar öğrenmek iyi bir egzersiz olabilir. Bu, onlar hakkında herhangi bir sorunuz varsa, yorum bölümünün aşağıda olduğunu söyledi.
Tamamlayan
Bakın, CSS'de tek bir div, birkaç gradyan, sözde öğeler ve değişkenler dışında hiçbir şeyle yapabileceğimiz çok şey var. Bir sürü farklı döner yükleyici yaratmışız gibi görünüyor, ancak hepsi küçük değişikliklerle temelde aynı şey.
Bu sadece başlangıç. Bu seride, CSS yükleyiciler oluşturmak için daha fazla fikir ve gelişmiş konsepte bakacağız.
Tek Elemanlı Yükleyiciler serisi:
- Tek Elemanlı Yükleyiciler: Döndürücü — Buradasınız
- Tek Elemanlı Yükleyiciler: Noktalar — 17 Haziran'da geliyor
- Tek Elemanlı Yükleyiciler: Çubuklar — 24 Haziran'da geliyor
- Tek Elemanlı Yükleyiciler: 3B'ye Geçiş — 1 Temmuz geliyor
Tek Elemanlı Yükleyiciler: Döndürücü aslen yayınlandı CSS Hileleri. Malısın bülteni al.
- "
- 10
- 3d
- a
- Hakkımızda
- Ek
- ileri
- Türkiye
- veriyor
- her zaman
- Başka
- Tamam
- Uygulanması
- yaklaşımlar
- ALAN
- göre
- arka fon
- Barlar
- temel olarak
- Çünkü
- önce
- Başlangıç
- olmak
- altında
- arasında
- Bit
- kutu
- tarayıcı
- bina
- Demet
- değişiklik
- Daire
- kod
- Toplamak
- kombine
- ortak
- kavram
- yapılandırma
- Düşünmek
- içerik
- kontrol
- olabilir
- Çift
- kapak
- yaratmak
- çevrimiçi kurslar düzenliyorlar.
- oluşturur
- Oluşturma
- Şu anda
- anlaşma
- bağlı
- ayrıntılar
- DID
- farklı
- Boyut
- ekran
- aşağı
- kolayca
- Efekt
- elemanları
- vb
- kesinlikle
- örnek
- örnekler
- Egzersiz
- karartmak
- şekil
- Ad
- uygun
- takip etme
- şu
- itibaren
- eğlence
- daha fazla
- Verilmesi
- Bakış
- gidiş
- Tercih Etmenizin
- büyük
- Grid
- yükseklik
- okuyun
- Ne kadar
- Nasıl Yapılır
- HTTPS
- Kocaman
- Fikir
- fikirler
- görüntü
- görüntüleri
- uygulama
- önemli
- Diğer
- artan
- IT
- Temmuz
- öncülük etmek
- ÖĞRENİN
- seviye
- hatları
- küçük
- yük
- Bakın
- bakıyor
- yapılmış
- yapmak
- YAPAR
- maske
- Maskeler
- Mesele
- anlamına geliyor
- olabilir
- Daha
- numara
- optimize
- Diğer
- aksi takdirde
- tüm
- kendi
- OYNA
- pozisyon
- mümkün
- önceki
- özellik
- soru
- RE
- ulaşmak
- Gerçeklik
- kalan
- gerektirir
- Safari
- Adı geçen
- aynı
- Dizi
- set
- Shape
- şekiller
- paylaş
- benzer
- Basit
- tek
- beden
- küçük
- So
- katı
- biraz
- uzay
- alanlarda
- kare
- Yine
- destek
- Musluk
- görevleri
- teknikleri
- The
- şey
- zaman
- üst
- dokunma
- Dönüştürmek
- Şeffaflık
- seyahatleriniz
- Güncelleme
- us
- kullanım
- değer
- W3
- Ne
- süre
- içinde
- olmadan
- sözler
- çalışma
- yazı yazıyor