Animasyonlu bir gradyanla zamanla zamanla arka plan nasıl yapılır
Bu yazı Mini Serimizde Bölüm 4’tür. Her birine nasıl ulaşacağına dair bir öğretici ile Divi’nin geri sayım modülünün beş benzersiz örneği için bu haftayı dört gözle bekleyin!
Gradyanın tasarım dünyasında yeniden ortaya çıktığını hiç fark ettiniz mi? İster dokunun etkisi için küçük bir küçük gradyan, ister çok renkli animasyon gradyanı olsun, gradyan eğilimlerini kucaklayan her boyutun tasarımının farkında olan bir şirket. Bu yüzden bugünün yazısında, pürüzsüz bir animasyon gradyanının arka planına karşı nasıl güzel bir geriye dönük zaman sayımları yapacağınızı göstereceğim. Geriye doğru sayarsanız olun veya gerginlik oluşturursanız, bu geri sayım ziyaretçileri web sitenize kesinlikle etkileyecektir.
Başlayalım! Divi’nin Geriye Sayma Modülü: Önce ve sonra varsayılan zaman -retreat modülüne aşina olabilirsiniz, ancak bugün ne yapacağımızla bakalım ve karşılaştıralım: Ve bu bugün yapacağımız geri sayım: Animasyonlu GIF çerçevesinin hızı nedeniyle, gradyan animasyonu yukarıdaki resimde pürüzsüz görünmüyor. Neyse ki, Divi web sitenizde iyi görünecek! Animasyonlu gradyanlara ek olarak, bu geri sayım sayfadan çıkma zamanına yardımcı olan birkaç gölgeye sahiptir. Bunu, tüm geriye doğru sayılardan ve sayıların metninin gölgesinden düşme gölgesinde görebilirsiniz. Bu, geri sayımı web sayfanızda canlı hissettiren geri sayımın derinliğini ve dokusunu verir.
YouTube kanalı için animasyonlu animasyonlu gradyanın bir arka planı ile nasıl zaman yapılır Bu geriye dönük zamanın tasarım öğelerini ve bazı özel CSS’yi hazırlıyoruz, bu nedenle bulunacak, indirilecek resim yok, veya düzenlendi. Ancak, bizim için gerekli olan CSS oluşturmak için bir çevrimiçi gradyan animatör kullanmamız gerekiyor. Orada birkaç ücretsiz gradyan jeneratör var, ancak kullandığım ve tavsiye ettiğim şey https://www.gradient-animator.com/hal jeneratörle yapmanız gereken ilk şey rengin eklemektir. Aşağıdaki iki rengi kullanacağız: #6990AF; #74B2AF; Yeşil düğmesini tıklayın ‘Renk Ekle’ ve ilk rengi ekleyin. Ardından, yukarıdan ikinci bir renk eklemek için aynı şeyi tekrar yapın. Ardından, gradyan animasyonunuzu arka planda çalışırken görmek için Önceden Düğmeye tıklayabilirsiniz. Varsayılan durumda diğer ayarlara izin veriyorum, ancak isterseniz açıyı ve hızı değiştirmekten çekinmeyin. Animasyondan memnun kaldığınızda, sayfanın ortasındaki CSS kodunu kopyalayın ve güvenli bir şekilde saklanacak boş metin dosyasına yapıştırın. Yakında geri döneceğiz. Tasarımı Divi ile uygulayarak animasyonumuz yapıldı, Divi’de bir zaman yapmaya başlamaya hazırız. Bu serideki önceki gönderi gibi, bugün yeni bir sayfada bir Time Counal’ı geri getirmeyi veya mevcut bir sayfaya eklemeyi seçebilirsiniz.
Bu öğretici için işleri olabildiğince basit tutmak için yeni bir sayfada çalışacağım. Bu nedenle, yeni bir sayfa oluşturacağım, Divi Builder’ı etkinleştireceğim, ardından “Visual Builder Kullan” düğmesini tıklayacağım. Benim gibi yeni bir sayfa oluşturduysanız, boş bir parça olmalı. Değilse, bunu mevcut Divi sayfasına eklerseniz yeni bir parça oluşturun. Şimdi Yeşil Daire simgesine (+) tıklayarak satır ekleyeceğiz, ardından aşağıdaki resimde kırmızı okla gösterildiği gibi bir sütun satırı için simgeyi tıklayacağız. Sonraki, Divi otomatik olarak listeden modülü seçmenizi isteyecektir. . Bu yüzden geri çekilmek için zaman seçin veya kısayol olarak adı yazmaya başlayabilirsiniz ve üstte kolayca görünecektir.
Modül Ayarlarını Ayarlama Zaman -Counter -Pounding Modülü bir zaman ekledikten sonra, -o -Counter -sayım ayarları önünüzde açılır. Lütfen ve geriye doğru sayılacak tarihi seçin. Ardından, arka plan rengini #74B2AF olarak değiştirin. Ardından, tasarım ayarları için sekmeyi tıklayın: Yazı tipi ve yazı tipi etiketini kalın ve büyük harfle değiştirin (TT simgesi) Yazı tipi numaralarının boyutunu 60 piksel olarak değiştirin
Yazı tipi etiketinin boyutunu 15px olarak değiştirin
Şimdi Kaydet’i tıklayın ve şimdiye kadar görmeniz gereken şey budur:
Yine de oldukça temel. Animasyonlu gradyanımız da dahil olmak üzere eklenecek birkaç CSS var!
Daha sonra aşağıdaki CSS’yi özel CSS kutusuna kopyalayabilir ve ekleyebilirsiniz. Max-Width: 620px;
Marj-sol: Otomatik; Marj-Sağ: Otomatik;
Border-Radius: 10 piksel;
Box-Shadow: 0px 12px 50px #a9a9a9;
}
.Custom-countdown
Text-Shadow: 0px 3px 20px #658586;
}
.Custom-countdown-4. Günler {
Marj-sağ: 23px;
}
.Custom-countdown-4. Lable {
Yazı tipi-ağırlık: 600! Önemli;
Text-Shadow: Yok! Önemli;
}
Yukarıdaki CSS bizi neredeyse orada yapıyor! Ancak arka planın sadece statik bir renk olduğunu göreceksiniz. Yine de arka plan için gradyan animasyonu için özel bir CSS eklememiz gerekiyor. Jeneratör tarafından üretilen CSS’yi depoladığınız yere. Bunu CSS sayfasına kopyalayacağız, ancak önce özel sınıfımızı eklememiz gerekiyor. Bunu yapmak için, sadece gradyan animasyon kodunun ilk bölümüne. Ve @-Webkit-Keyframes kodundan hemen önce kapak braketlerini (}) ekleyin. Ayrıca kodumu kopyalayabilir ve önceki CSS kodunu eklediğiniz yere yapıştırabilirsiniz. Ama gelecekte de kullanabilmeniz için bir animatör gradyanını nasıl kullanacağınızı öğrenmenizi istiyorum! .Custom-countdown-4 {
Arka plan: doğrusal gradyan (270deg, #6990AF, #74B2AF);
Arka plan boyutu:% 400% 400;
-Webkit-Animation: AnimationName 30s Infinite’ı kolaylaştırır;
-Moz-animasyon: animasyonname 30s sonsuza dek;
Animasyon: AnimationName 30s Infinite’ı kolaylaştırır;
}
@-Webkit-Keyframes animasyonName {
%0 {arka plan pozisyonu:%0%50}
%50 {arka plan pozisyonu:%100%50}
%100 {arka plan pozisyonu:%0%50}
}
@-moz-Keyframes animasyonName {
%0 {arka plan pozisyonu:%0%50}
%50 {arka plan pozisyonu:%100%50}
%100 {arka plan pozisyonu:%0%50}
}
@keyframes animationName {
%0 {arka plan pozisyonu:%0%50}
%50 {arka plan pozisyonu:%100%50}
%100 {arka plan pozisyonu:%0%50}
}
Ve bu eklememiz gereken tek CSS! Sayfa ayarlarını ve sayfanın kendisini kaydetmeyi unutmayın!
Her zamanki gibi, yaratılışa hayran kalalım
