Bu öğreticiye geri dönün sonraki adımımız C-s'imiz üzerinde çalışmaya başlamaktır.
Dolayısıyla yeni bir C SS dosyası ve genel stil sayfası oluşturmalı ve çağırmalısınız.
Bu başarı.
Bu yüzden geri dönersek, genel dizinimize gidin stil sayfalarını açın, zaten açık ve sağ
tıklama ile yeni bir dosya oluşturun ve bunu bir tane arayacağım.
Blanding bu evet.
Şimdi açtıysam boş kalır ve ana sayfamızı
oluşturacak tüm kurallarla doldurulmaya hazırdır.
Yani burada, yapmak istediğimiz ilk şey açık öğrenme Danciu, yaptığımız şeyi söylüyor.
Ve engellemek için bedenlerin arka plan rengini ayarlamak istiyoruz.
İstediğiniz rengi seçebilirsiniz.
Yalnızca siyah bir geçmişe ait ilk görüntüyü silmek ve oradan çapraz geçiş yapmaya başlamak güzel
görünüyor diye düşünüyorum.
Dolayısıyla, yapmış olduğumuz şey, gövde etiketi seçildikten sonra tekrar karma hale getirmek için bu
kuralın içine yapıştırdım.
0 0 0, siyahla aynıdır.
Bu yüzden şimdi tüm bağlamların bir konuma ihtiyacım var ve sahip olduğumuz tüm kampları bir kimlik belgesi ile
seçmek istiyorum.
Bu yüzden, ileride ID'ler seçicisini kullanacağız ve Blanding tire başlığı.
Ve biz burada yaptıklarımız bu metni aldık ve z dizinini 1 verdik.
Z dizinini temel olarak bilmiyorsanız, web sayfası üç boyutlu bir düzlem üzerinde görüntülenebilir.
Yukarı ve aşağı doğru sola ve sağa X ve Y'ye, sonrasında uzaya ileri ve geri olan Z'ye sahibiz.
Bu yüzden eğer bir z indeksi 1 verirsek, bize doğru geliyor.
konumdan değiştirmek zorunda kalmamız, tüm HTML öğelerinin varsayılan konum değeridir .
Ve z dizinini kullanabilmemiz için az dizin içeren bir içeriğin
üstünde katmanlı olan, statüyü statik haricindeki bir
Ve statik kullanırsanız, aslında z dizinini yoksayarsınız.
Şimdi yapmak istediğimiz şey o metnin ve düğmenin merkezlenmesidir.
Bu yüzden sadece metin hizalama merkezi kullanıyorum ve bu bizi yatay olarak merkezileştiriyor.
Sayfada dikey olarak çıkarılmamız için aslında bunun için birçok
farklı yol var ama bunu yapmanın en kolay yolunun yalnızca görünüş yüksekliğini kullandığını keşfettim.
Dolayısıyla burada yaptığımız şey, dolgu yüksekliğini 40 görüş yüksekliğine ayarlamak.
50'de oynamamamın nedeni, içeriği daha alt seviyelere doğru itecek olması.
Ve ortalıkmış gibi görünüyor.
Dolayısıyla bu kuralı kurtaracağız, burada yenilene gidin ve arka planın siyah ve
alt olduğunu görebilirsiniz.
Evet.
Burada, sayfayı yenileyebilmemiz için metin merkezli olamaz.
Biraz daha iyi görün.
Dolayısıyla şu anda Kampına Hoş Geldiniz metniniz neredeyse görünür değil, bu yüzden bir saniye içinde onu değiştireceğiz.
Görünüşe göre açılış kafasını alıyoruz ya da Slichter'e bir H1 seçici ekliyoruz ve
rengi 1 olarak değiştiriyoruz.
Yani şunu eklemek gerekir ki gidip sayfayı yenileyeceğim ve şimdi metni görmek çok daha kolay.
Arka planı aldığımızda, onu da görmek daha kolay olacak.
Yapmak istediğimiz sonraki şey sırasız listeyi şekillendirmek.
Listenin bir slayt gösterisi sınıfına sahip olduğunu bildiğiniz için onu kaydırmamız çok kolay.
Bu yüzden bu kuralı alacağım ve buraya takacağız.
ve daha sonra üst düzey konumları kullanarak sayfanın sol üst köşesine doğru iteledik. sıfır
Böylece, onursuz sınıfı kendi sınıfıyla seçtik ve boyun içine yerleştirilen konumu yüzde
100'e ayarladık ve böylece sayfanın tamamı kapandı
Ve burada gördüğünüz gibi, z dizinini sıfıra ayarladık.
Bu, arkaplan görüntülerinin diğer içeriğin arkasında olduğundan emin olur; bizim kutunuzdaki metinlerimize ya
da kamplarınıza hoş geldiniz deyin.
Liste stilimizi ayarlayın.
Ve bu savaş hareketi sırasında mermi şu şekilde gidiyor.
Listedeki öğelerden görmüyoruz.
Ve son olarak, herhangi bir kenar boşluğu veya dolgu bulunmadığından emin olmak istiyoruz.
Bu yüzden ikisini de sıfıra ayarladık.
Şimdi kurtaracağız, buraya geri döndük ve taze kaldık.
Buradaki sol tarafta bulunan mermi puanlarının kaybolduğunu görebiliriz.
Şimdi biz aslında tek tek liste öğelerine stil vermeliyiz.
kuralı çekeceğiz onu getirmek kopyala Intourist SS, onu unroot listesinin altına yapıştırıyor ve burada sahip
olduğumuz şeref listesi için sınıf seçicisinin aynı noktalı slayt gösterileri ve sonra söylüyorum Listedeki
her listeyi seçmek için yine genişlik ve yüksekliği yüzde 100 olarak ayarlayın.
Bu yüzden burada bu
Bu sefer mutlak en üstte ve solda veya sıfır olarak konumlandırıyoruz, arka plan boyutu da kapak olacak şekilde ayarlanmıştır.
Ve görüntülerin sayfanın tüm alanını kaplamasına izin verecek olan şey budur.
Ayrıca, sırt pozisyonumuzu yüzde 50 ila yüzde 50'ye ayarladık.
Ve bu, resimleri sayfanın merkezinde mükemmel bir şekilde merkezileştirecek.
Sonra son olarak, arka planı mutlu etmekten mutlu olduk.
Burada görüntünün dikey veya yatay olarak tekrarlanmadığı yerler.
sonra burada biraz yaratacağımız animasyonu yavaş yavaş bir opaklığa dönüştürmek için kullanacağız.
Opaklığını sıfıra ayarladık çünkü resimlerimizin solmaya başlamasını istiyoruz ve
Z dizinini sıfıra ayarladık yine de bu, arka plan görüntülerinin metnin ve
düğmenin arkasına yerleştirilmesini sağlayacaktır.
Burada sahip olduğumuz son mülkeye animasyon deniyor ve daha önce görmediğimiz bir şey.
Dolayısıyla bu, aslında görüntüleri solup sarmamıza izin verecek.
Dolayısıyla animasyonun adı resim animasyonudur ve bu, dakikalar içinde burada yaratılacağımız
animasyonla eşleştiği sürece onu istediğiniz gibi arayabileceğiniz keyfi olur ve ardından
animasyonun 50 saniye boyunca sürmesini söyleriz.
Doğrusal olduğundan ve doğrusal olanın ne olduğundan emin olarak, animasyonun başından
sonuna kadar aynı hızda olduğu gösteriliyor.
Ve son olarak, animasyonun sonsuza kadar dönmesini söylüyoruz.
Bu şekilde slayt şovumuz hiç bitmiyor.
Bu yüzden diyebiliriz ancak önizleme yaparsak hiçbir şey gösterilmeyecektir, çünkü animasyonu
kurmamız gerekiyor.
Ayrı ayrı liste öğelerine göre ayarlanmış herhangi bir görüntü de yok.
O halde devam edin ve şimdi bunu yapalım.
Bu nedenle, slayt listesinin tüm listesini öğelerin alt seçicilere kopyalayacağız ve
bu, arka plan görüntülerini gerçek liste öğelerine ekleyecek.
Dolayısıyla şimdi ve beş çocuk biriyle başlayıp beş yaşına kadar olan beş liste öğesinin
olduğunu görebiliyoruz.
Her birinize rolünüzün arka plan görüntüsünü veriyoruz ve isterseniz bu yerlilerle bağlantı kurabilir
veya resimleri görüntü dizininin içindeki genel dizininizin içine yerleştirebilirsiniz.
Ben devam ettim ve sadece onları resim yükleyeceğim veya bu web'de ücretsiz bir yükleme hizmeti.
sitenizde kullanılacak görüntüleri barındırmak için gerçekten tasarlanmamıştır ancak elle kullanılan hızlı bir düzeltme kullanılmıştır.
Web
İlk arka plan resmi için animasyon derhal başlayacak.
Dolayısıyla, animasyon geciktirmek zorunda değiliz.
Her görüntünün bir önceki resmin 10 saniyesinden sonra sönmesini istiyoruz.
Böylece bir sonraki resim animasyon gecikmesini 10 saniyeye ayarladım ve bundan sonra her resim için 10 artacağım.
Yani 20 saniyelik üçüncü 30, dördüncü 40, beşi 40 bize 50 saniyeye
kadar ilerleyecek ve bir numara resimden tekrar başlayacak.
şey göremeyeceğiz çünkü tüm parçalar sıfıra ayarlanır ve animasyonu birine dönüştürmek için ayarlamamıza gerek yoktur.
Öyleyse yine de devam edebiliriz ve CSSA dosyasına iniş yapmayı söyleyebiliriz ancak henüz hiçbir
Şimdi devam edin ve şimdi bunu yapın.
Bu yüzden öğreticiden anahtar kareler resim animasyon kuralını kopyalayıp buraya yapıştıracağım.
Yaptığımız şey, at çerçeve seçicisini alarak animasyona resim animasyon ismini veriyor.
Ve bu, slayt gösterimizdeki animasyon mülkiyetimiz için sahip olduğumuz önceki
değerle uyuşan kurallarla eşleşti.
Dolayısıyla, yapacağımız şey, animasyon içindeki çeşitli ana karelerde ne yapmak
istediğimizi göstermek.
Dolayısıyla animasyon yüzde sıfırdan yüzde 100'e iniyor, ancak yalnızca yüzde sıfırdan
yüzde 30'la ilgileniyoruz.
Dolayısıyla, burada olması, donukluk için sıfırdan başlayıp yüzde 10'luk bir
artışla başlıyoruz.
Uzaya gitmesine izin verdik.
Opaklığı yüzde 20'lik bir oranda bıraktığımızda yüzde 30'la sıfıra
geri döndük.
mülkiyet animasyon zamanlama işleve sahip olduğumuzun farkına varırsınız ve sonra da hafifletme eğilimi gösterir.
0'dan 10'a kadar kolaylaştırmak için ayarlanmış
Böylece, 0'dan 1'e kadar Faden'e dönüştüğümüzde daha düzgün bir geçiş sağlıyor.
Dolayısıyla, bu yüzdelerle nereden geldiğimizi merak ediyor olabilirsiniz.
Bu yüzden, ilerlemeye başladım ve burada neler olduğunu daha iyi görselleştirmek için animasyonun bir grafiğini hazırladım.
Yani temel olarak sıfır saniye ile 10 saniye arasında hareket edecek bir görüntü var ve
ikinci görüntü 10'dan 20'ye gidiyor.
Üçüncüsü 20-30, sonra 30-40 ve sonra 40-50, her biri 10 saniyede beş resim oluşturuyor.
solan görüntü var ve 10 saniye ile 15 saniye arasında bir sonraki görüntüye geçeceğiz.
Sıfır saniye ile 10 saniye arasında beş saniyede bir Faden var ve ardından bir imgenin solukluğunda
Yani bu, solen olan ve sonra turuncu renkte olan kırmızı renkte solan Mavi ile temsil edilebilir.
İlk görüntü yüzde 0'dan yüzde 10'a, sıfır saniyeden beş saniyeye doğru soluyor
ve yüzde 10'dan yüzde 20'ye kadar sağlam kalıyor.
Dolayısıyla,% 10 ila% 20 arasında macunsu bir pasta var.
Ve sonra yüzde 20'den yüzde 30'a, aslında birinden sıfıra doğru soluyor.
Ve bu gerçekleştiğinde, animasyonun başında 10 saniyede başlamış bir sonraki resim, sıfırdan
1'e 10-15 arasında olacak.
Ve bu, çapraz geçiş efekti yaratmak için burada örtüşecektir.
Dolayısıyla bu beş saniye sağlam kalıyor ve sonra başka bir çakışmaya dönüşüyoruz
ve bir sonraki resim kayboluyor ve aynı desen, animasyonun sonu olan 50 saniyeye varıncaya kadar tekrar ediyor.
Bu görüntü katı.
Ve sonra, beşinci görüntü soluklaştıkça orijinal görüntüsünün solduğu başın sonuna kadar
geri gideriz ve tekrar tekrar başlar ve sonsuza kadar döngüyüz.
Öyleyse devam edin ve ABD'yi kurtaralım ve web kamerasını açın.
Sunucularınızın çalışıp çalışmadığından ve yenilendiğinden emin olun ve canlı animasyon görebilirsiniz.
Dolayısıyla bu görüntü beş saniyeliğine görünür durumda ve bir sonraki resim kaybolana kadar solacak.
Bu beş saniyelik bir geçiş.
Bu fotoğraftan beş saniye daha sonra alıyoruz ve sonra bir sonraki fotoğrafa geçeceğiz.
Dolayısıyla yapmak istediğiniz son şey, arka plan kaydırıcısının tüm tarayıcılarda çalıştığından emin olmaktır.
Öğreticiye burada geri dönüyorum ve en altta bu kural var ya kopyalamalıyım.
Başarınızı geri getirin.
modernizer tarafından eklendi ve daha önce modernizörler CD'si vardı ve nasıl burada baktığımızı
bilmek istiyorsanız hemen burada. up modernizer CDR ve ben bir tane aldım.
Altına yapıştırın ve gördüğünüz gibi eski tarayıcıların hiçbir CSSA animasyonunu desteklemediğini söyleyen bu virgülden sonra Klowns
Bu yüzden sadece dosya sürümünü kopyalamayı bitirip başta bir komut dosyası etiketine
ekledim ve betiği, bu javascript'in sayfadaki diğer öğelerle eşzamanlı olarak patlatmasını
sağlayan bir senkronizasyona ayarladım.
CSSA'ya geri dönersek, kapasitelerinin yalnızca 1 olarak ayarlandığını görebiliriz.
Yani burada olacak olan şey, sistem entegrasyonunu desteklemeyen tarayıcıların görünür bir slayta
sahip olması ve bu görüntünün arka planı olacağıdır.
Böylece tam ekran arka plan resmi kaydırma çubuğu için.
Şimdilik olduğu gibi sorularınız varsa, bir sonraki videoyu göreceğim.
Teşekkürler.