CSS Animasyon ve olasılıklar

Merak animasyon nasıl CSS, birçok kullanıcı dersler ve talimatlar arayışı içinde gidin. Böyle talimatlar burada bulunabilir olsak da diğer şeylerin yanı sıra, biz CSS kullanarak animasyonun oluşturulmasında size ana yararlı tavsiyeler verecektir.

İdeal gelişme sırrı

aşağıdaki gibi pürüzsüz animasyon CSS nedir tam olarak bilmek isteyenlere verilebilir Önerileri vardır. Ne zaman günlük kod hazırlanmış adet deney ve kendi deneylerini gerçekleştirmek için çalışıyoruz. kendi sitelerinde işten boş zamanlarında, tam olarak şu ya da bu özelliğini incelemek için, bir kod parçasının katlanması ile ne olacağını görmek için deneyin. bambaşka bir dil araçlarını kullanarak ilginç fikirleri her türlü uygulamaya çalışın ve CSS animasyonları yeni bir şekilde sizin için açılacaktır. Kendiniz için deney - Bu basit tavsiyem şu.

CSS-animasyon görüntüsü

Ve şimdi ilginç örnekler için. Kural olarak, animasyon standart kullanımı zaman içinde kademeli olarak sitenin bazı unsurları değiştirmektir. Ama bu, çok bariz değil mi? Yani burada sizlerle animasyon görünüm ve zamanı kullanmak için olağanüstü şekilde paylaşmak.

Aslında animasyon bir parça veya bütünüyle sitesine fiili değişiklikler neredeyse anında olabileceğini. Bunu yapmak için, biz herhangi iki ana kareleri sormak, ama çok küçük bir aralık kullanın. Örneğin,% 0.001'e eşit olabilir. Bu durumda, CSS animasyon anında gerçekleşebilir. Bir neon tabela simüle için idealdir. Bu işaret yanıp söner ve eğer animasyon CSS sonra daha fazla şeffaflık olacak ve özellik metin-gölge kullanmak ve, işaret olacak neredeyse gerçek gibi.

İşte bir örnek kodudur.

Fonksiyonel düğmeler geliştirin

Normal olmayan olabilir sorusunu ele alırsak CSS-animasyon düğmesine, o söylenebilir sitelerde dekorasyon seçenekleri düğmesinin büyük takımı olduğunu. bir örneği ele alalım. dışbükey düğmelerine basarak etkisi. Örnek kod - aşağıya.

kod animasyon CSS bloğunun böyle basit bir parça ile oldukça iyi bakacağız. Çok ilginç görünüyor ve genellikle tamamen farklı sitelerde kullanılır.

Bir site pasajı üzerinde gezdirin CSS-animasyon

Dinamik ve modern site o kadar uzun kullanıcıya kalır. Buna ek olarak, önemli bir rolü de etkileşim tarafından oynanır. Bu kesinlikle doğrudur, ama ne olabildiğince etkileşimli site yapmak için yardımcı olabilir?

Çok iyi o sitenin fare tasarım unsurları ve parçaları ile çalışmak bak. Yayının üzerine Animasyon düğmeleri yukarıda tartışılan, ama bunun dışında onlara en şık hale "canlandırmak" ve sitenin çeşitli parçalar olabilir. Her şey olduğu gibi, burada ana ilkesi - aşırıya kaçmayın.

Yani, dört ilişkili özelliklere kadar sürebilir mükemmel bir geçiş özelliği vardır.

belirli bir zaman CSS-animasyon sırasında değişecek kod parçası üzerine geldiğinizde. Zaman süresi özelliği ile belirlenir. Yani bir öğenin üzerine geldiğinizde o tuhaf değişim biz seçicinin ayarlanan herhangi mülkiyet başlar vardır. Bizim durumumuzda öyle - .element (noktalı ileri). Biraz aşağıda yalancı .hover sahip olan konteyner div geçiş, arka plan kırmızıdan yeşile değişir kodu, bir örnektir.

Bir kullanıcı fare CSS animasyon hemen değişmez dolaşmaktadır, ancak ilginç bir etkisi yaratan bir saniyenin biraz fraksiyonu, gecikmelidir zaman.

Buna ek olarak, önceki örnekte ise, bir div öğesi arka plan, tüm değerini kullanarak, tüm mülkiyet uygulayabileceğiniz unutulmamalıdır yeşilden kırmızıya değişti ve 0,4 saniye içinde hareket edildi belirli bir kural tamamen sorulardan hemen.

aşağıdaki gibi örnek kod temsil etti.

özellikleri dolgu ve arka plan geçiş etkisi de gösterildiği gibi belirlenen bir geçiş özelliği olan ortaya çıkar. Sen değerlerin virgülle ayrılmış belli kümesi belirtebilirsiniz unutmamalıdır.

düğmeleri animasyonun bu türünü kullanarak bazı nüansları

Prensip olarak, uzun vadede bu belirtilen ve veri değerlerine aktarılacaktır hangi sırayla bu kadar önemli değildir. bir vakada hariç. Biz gecikme özelliği başa çıkabilirim. Bu durumda, biz süresini ve zamanını belirlemek gerekir. Başka bir deyişle, biz bize bir gecikme meydana gelecektir ne kadar çok gerekli anlatmak için kodu gerekir.

akılda tutarak bazı özellikler geçiş etkisi olamaz. Yani bunlar geçici olamaz. Bu da animasyonlu olamaz gerçeğinden kaynaklanmaktadır.

metin animasyon

ayarlanabilir kodu ve mükemmel bir animasyon CSS metnin yardımıyla. Bu yazının bir tür ve büyük bir başlık, site başlığı olabilir. Yukarıda belirtildiği gibi, ana şey - aşırıya kaçmayın ve ucuz bakacağız bir depolama, sitenize çevirmek yoktur.

Peki, metnin ne CSS animasyon dışarı bulmaya çalışalım ve oluşturun ve metin gölgeler. Belki resimlerinin adları kendileri herhangi loş-karanlık arka planda solmaya gibiydi korku filmleri, gördüm. en Böyle bir şey genel bir örneğini yeniden deneyelim.

korku filmleri tarzında metnini canlandırın

Aslında tüm fikir harfler biraz belirsiz ve döndürmek hangi metni yapmaktır. Burada harfler arasında bir boşluk olmalıdır. Biz interalphabetic gölge yanı sıra aralığı kullanacaktır. fikri uygulamak için, biz yazarlık Dave Rupert Lettering.js bir komut dosyası gerekir. O etiket süre içinde kelimeleri artı birkaç harf sarmak için gerekli. Önce h2 etiketinde ifadesini sarmak gerekiyor. İşte bir örnek kodudur.

Etiket süre içinde h2 etiketleri Sonra obernom tüm kelimeler.

Şöyle olur.

Biraz hantal bakacağız, ama bu zahmet izin vermeyin.

Manik yeterli bir yapı elde.

Sonuç olarak, biz bir span etiketi sarılmış mevcut harflerin her biri vardır. Onlar gerçekten çok ortaya çıktı. Ama örnek sonuçlandı yukarıdaki kodda basit. Onların tüm yapı, kendini yazabilir ve birkaç olacak. Bu Kullanmak istediğiniz metnin ne tür de bağlıdır.

Biz çalışmalarımızı biraz stilize vardık. Yukarıdaki örnekte bizim başlıkların tamamı, ekranın tüm genişliğinde yer alacaktır. Ve neredeyse tüm alandan alacak.

Biz yere gidiyoruz beri bizim harflerin tüm kap için, o zaman, ekrana ortalanmış ve biz de flexbox'a gerekir.

İşte kod bir örnektir.

üst sınıf .os-cümleleri ait bir span class, sarılmış tüm harfleri, yer alacaktır ve ortada kendisine bağlı olacak şekilde Şimdi biz yaptık.

boş alan biraz eklemek unutmayın ki kendisi yazmak aralıktır.

Bu durumda, birinci ambalaj bazı ek özellikleri istiyoruz. Bu özellik bir bakış açısı. Bu bize bu site, öne açığa çıkması için nasıl olacak emin olmak için izin verecektir.

Mektuplarda olarak Kendilerini şeffaf olacaktır ve biz 5.2 saniyede bir yere onlar için animasyon bir dizi başlatacak. Aşağıda - örnek kodu.

Bizim cümleler ve ifadeler nasıl görüneceğini ve hangi gecikme ile belirlenmesi de önemlidir. Metnin parçaları hangileri öncekine göre daha hızlı görünür ve ne kadar olacak. Kod aşağıdaki gibi görünecektir.

Bize küçük ama çok ilginç bir etki vereyim. 0.2 opaklığını yerleştirin. Interalphabetic mesafe dolayısıyla oldukça büyük olacaktır. Harfler ayrıca birkaç eksen Y için döndürülür görüşürüz, hem de sitenizin kullanıcıları bu harflerin sadece küçük bir parçası olacaktır. Ayrıca, metin gölge özelliklerinin etkisini vermek unutmayın. Yarım animasyon, biz alışılmadık bir şey yaptı. Biz adlarıyla kendileri yönetecek ve aynı zamanda aralarındaki olduğu mesafeyi azaltmak ve sonra opaklığı artırmak ve eksen Y için 0 üzerinde povernom oturum açtıktan sonra

Sonunda, yine birkaç harf eklemek veya bunları promasshtabiruem tehlikede. Bu yeni küçük bulanıklık efekti verecektir.

Ve nihayet son cümle CSS-animasyon.

Ve evet, nihayet son dokunuşları. Bazı belirli kelimeleri üzerinde durulacak. Onlar cesur yüzü olacaktır. Bu gerekli önem verecektir.

ilham unutmayın

Eğer özellikleri ve CSS animasyon ile kendinizi deneme çalıştığınızda, günlük yaşamda her şeyde ilham bulmaya çalışın. Bu bazı harika bir video etkisi ilginç bir web sayfalarından herhangi bir şey olabilir.

Eğer gözetlemek yoksa ek olarak, nasıl mükemmel sonuçlar elde edebilirsiniz, şu ya da bu etkiyi yapmak ve kendi üzerine yeniden denemek için. Ya da, en azından, her zaman, aslında, kullanmak programlama dili olanakları hakkında daha fazla şey öğreniyoruz. Hatta tam olarak gerçekleşmiş senin fikrin de çok muhteşem olduğunu kanıtlayabilir.