Checkbox.css ile Kendi Checkbox Animasyon Efektlerinize Stil Verin
Son bir yayında, özel radyo düğmeleri için eğlenceli bir animasyon kitaplığı ele aldım, CSS tarafından desteklenmektedir.
Bu ücretsiz kütüphane 720kb tarafından serbest bırakıldı ve kısa sürede bir Checkbox.css adlı takip alternatifi. Bu hariç, benzer şekilde çalışır restyles ve animasyonlar HTML onay kutularını.
Bu kütüphane ile bir kütüphaneler paketi olarak geliyor üç farklı amaç:
Radiobox.css- özel radyo animasyonlarıCheckbox.css- özel onay kutusu animasyonlarıChecked.css- stilleri ve mevcut seçili öğeleri canlandırır (radyolar ve onay kutuları)
Bunların hepsi aynı ekip tarafından geliştirilir ve benzer şekilde çalışır. Ama gerek her bir kütüphaneyi ayrı ayrı dahil et tam etkilerini almak istiyorsanız.
Bu özelliklerin bazılarını ve nasıl çalıştıklarını görmek için Checkbox.css GitHub'a göz atın. Varsayılan olarak, güveniyorlar CSS geçişleri ile birlikte 2D dönüşümler, tarayıcı desteğine bağlı olarak.
Bu kütüphanelerin hiçbiri JS geri dönüş yöntemleri ile gelmiyor, bu yüzden gerçekten yalnızca CSS tabanlı animasyonlar için çalışır. Ancak, demo sayfasına hızlı bir bakış, bu animasyonları sayfanıza eklemekten memnun olmanız gerekir.
İşlem daha kolay olamazdı çok az-çok kodlama bilgisi gerektirir (her zaman biraz olması yararlı olsa da).
CSS stil sayfası sayfanıza girdikten sonra, onay kutunuza bir format ekleyin; kutusunun-X nerede “x” istediğiniz animasyonu temsil eder. Örneğin, işte “atlama” animasyon efekti:
En iyi bölüm bu kütüphanenin nasıl yapabildiği radyo düğmesi formatı ile birlikte çalışın, çok. İsterseniz kesinlikle Checked.css kütüphanesini tavsiye ederim. mevcut seçili öğeleri canlandır.
Bütün bu bağımlılıkların seni korkutmasına izin verme. Hemen hemen herkes Checkbox.css kütüphanesini veya ilgili kütüphanelerden herhangi birini ayarlayabilir, hepsini küçük bir kopya ve yapıştırma ile sıfırdan.
Ayrıca, bu girdi animasyonu kitaplıklarına ilişkin sorularınız veya önerileriniz varsa, içerik oluşturucuları sitelerinde veya Twitter'da @ 720kb_ üzerinden mesajlaşmayı deneyin.
