1
00:00:04,260 --> 00:00:08,990
Bu öğreticiye geri dönün sonraki adımımız C-s'imiz üzerinde çalışmaya başlamaktır.

2
00:00:09,150 --> 00:00:13,420
Dolayısıyla yeni bir C SS dosyası ve genel stil sayfası oluşturmalı ve çağırmalısınız.

3
00:00:13,590 --> 00:00:15,280
Bu başarı.

4
00:00:15,510 --> 00:00:20,860
Bu yüzden geri dönersek, genel dizinimize gidin stil sayfalarını açın, zaten açık ve sağ

5
00:00:20,940 --> 00:00:24,930
tıklama ile yeni bir dosya oluşturun ve bunu bir tane arayacağım.

6
00:00:24,930 --> 00:00:26,350
Blanding bu evet.

7
00:00:27,430 --> 00:00:32,120
Şimdi açtıysam boş kalır ve ana sayfamızı

8
00:00:32,130 --> 00:00:35,530
oluşturacak tüm kurallarla doldurulmaya hazırdır.

9
00:00:36,150 --> 00:00:41,450
Yani burada, yapmak istediğimiz ilk şey açık öğrenme Danciu, yaptığımız şeyi söylüyor.

10
00:00:41,590 --> 00:00:44,750
Ve engellemek için bedenlerin arka plan rengini ayarlamak istiyoruz.

11
00:00:44,800 --> 00:00:46,120
İstediğiniz rengi seçebilirsiniz.

12
00:00:46,120 --> 00:00:50,860
Yalnızca siyah bir geçmişe ait ilk görüntüyü silmek ve oradan çapraz geçiş yapmaya başlamak güzel

13
00:00:50,860 --> 00:00:51,980
görünüyor diye düşünüyorum.

14
00:00:55,530 --> 00:01:00,300
Dolayısıyla, yapmış olduğumuz şey, gövde etiketi seçildikten sonra tekrar karma hale getirmek için bu

15
00:01:00,300 --> 00:01:01,230
kuralın içine yapıştırdım.

16
00:01:01,270 --> 00:01:07,530
0 0 0, siyahla aynıdır.

17
00:01:07,610 --> 00:01:13,010
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

18
00:01:13,010 --> 00:01:13,720
seçmek istiyorum.

19
00:01:13,760 --> 00:01:19,290
Bu yüzden, ileride ID'ler seçicisini kullanacağız ve Blanding tire başlığı.

20
00:01:19,870 --> 00:01:24,630
Ve biz burada yaptıklarımız bu metni aldık ve z dizinini 1 verdik.

21
00:01:24,640 --> 00:01:29,700
Z dizinini temel olarak bilmiyorsanız, web sayfası üç boyutlu bir düzlem üzerinde görüntülenebilir.

22
00:01:29,860 --> 00:01:36,310
Yukarı ve aşağı doğru sola ve sağa X ve Y'ye, sonrasında uzaya ileri ve geri olan Z'ye sahibiz.

23
00:01:36,310 --> 00:01:40,120
Bu yüzden eğer bir z indeksi 1 verirsek, bize doğru geliyor.

24
00:01:40,240 --> 00:01:45,860
konumdan değiştirmek zorunda kalmamız, tüm HTML öğelerinin varsayılan konum değeridir .

25
00:01:45,860 --> 00:01:50,980
Ve z dizinini kullanabilmemiz için az dizin içeren bir içeriğin

26
00:01:50,980 --> 00:01:54,380
üstünde katmanlı olan, statüyü statik haricindeki bir

27
00:01:54,580 --> 00:01:58,300
Ve statik kullanırsanız, aslında z dizinini yoksayarsınız.

28
00:01:58,300 --> 00:02:01,080
Şimdi yapmak istediğimiz şey o metnin ve düğmenin merkezlenmesidir.

29
00:02:01,090 --> 00:02:05,440
Bu yüzden sadece metin hizalama merkezi kullanıyorum ve bu bizi yatay olarak merkezileştiriyor.

30
00:02:05,470 --> 00:02:09,730
Sayfada dikey olarak çıkarılmamız için aslında bunun için birçok

31
00:02:09,730 --> 00:02:15,880
farklı yol var ama bunu yapmanın en kolay yolunun yalnızca görünüş yüksekliğini kullandığını keşfettim.

32
00:02:15,910 --> 00:02:19,920
Dolayısıyla burada yaptığımız şey, dolgu yüksekliğini 40 görüş yüksekliğine ayarlamak.

33
00:02:20,230 --> 00:02:24,690
50'de oynamamamın nedeni, içeriği daha alt seviyelere doğru itecek olması.

34
00:02:24,700 --> 00:02:26,490
Ve ortalıkmış gibi görünüyor.

35
00:02:27,010 --> 00:02:33,380
Dolayısıyla bu kuralı kurtaracağız, burada yenilene gidin ve arka planın siyah ve

36
00:02:33,930 --> 00:02:35,220
alt olduğunu görebilirsiniz.

37
00:02:35,290 --> 00:02:35,560
Evet.

38
00:02:35,580 --> 00:02:40,020
Burada, sayfayı yenileyebilmemiz için metin merkezli olamaz.

39
00:02:40,150 --> 00:02:42,710
Biraz daha iyi görün.

40
00:02:42,720 --> 00:02:47,630
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.

41
00:02:49,800 --> 00:02:57,030
Görünüşe göre açılış kafasını alıyoruz ya da Slichter'e bir H1 seçici ekliyoruz ve

42
00:02:57,030 --> 00:02:58,960
rengi 1 olarak değiştiriyoruz.

43
00:02:59,700 --> 00:03:07,200
Yani şunu eklemek gerekir ki gidip sayfayı yenileyeceğim ve şimdi metni görmek çok daha kolay.

44
00:03:07,270 --> 00:03:11,170
Arka planı aldığımızda, onu da görmek daha kolay olacak.

45
00:03:13,730 --> 00:03:17,080
Yapmak istediğimiz sonraki şey sırasız listeyi şekillendirmek.

46
00:03:17,360 --> 00:03:21,370
Listenin bir slayt gösterisi sınıfına sahip olduğunu bildiğiniz için onu kaydırmamız çok kolay.

47
00:03:21,650 --> 00:03:25,040
Bu yüzden bu kuralı alacağım ve buraya takacağız.

48
00:03:25,580 --> 00:03:32,330
ve daha sonra üst düzey konumları kullanarak sayfanın sol üst köşesine doğru iteledik. sıfır

49
00:03:32,390 --> 00:03:38,060
Böylece, onursuz sınıfı kendi sınıfıyla seçtik ve boyun içine yerleştirilen konumu yüzde

50
00:03:38,060 --> 00:03:41,360
100'e ayarladık ve böylece sayfanın tamamı kapandı

51
00:03:41,690 --> 00:03:44,890
Ve burada gördüğünüz gibi, z dizinini sıfıra ayarladık.

52
00:03:45,000 --> 00:03:49,940
Bu, arkaplan görüntülerinin diğer içeriğin arkasında olduğundan emin olur; bizim kutunuzdaki metinlerimize ya

53
00:03:49,970 --> 00:03:52,130
da kamplarınıza hoş geldiniz deyin.

54
00:03:53,910 --> 00:03:55,070
Liste stilimizi ayarlayın.

55
00:03:55,080 --> 00:03:58,240
Ve bu savaş hareketi sırasında mermi şu şekilde gidiyor.

56
00:03:58,240 --> 00:04:00,340
Listedeki öğelerden görmüyoruz.

57
00:04:00,340 --> 00:04:03,170
Ve son olarak, herhangi bir kenar boşluğu veya dolgu bulunmadığından emin olmak istiyoruz.

58
00:04:03,340 --> 00:04:05,180
Bu yüzden ikisini de sıfıra ayarladık.

59
00:04:05,620 --> 00:04:08,530
Şimdi kurtaracağız, buraya geri döndük ve taze kaldık.

60
00:04:08,770 --> 00:04:12,480
Buradaki sol tarafta bulunan mermi puanlarının kaybolduğunu görebiliriz.

61
00:04:16,660 --> 00:04:19,670
Şimdi biz aslında tek tek liste öğelerine stil vermeliyiz.

62
00:04:19,780 --> 00:04:26,460
kuralı çekeceğiz onu getirmek kopyala Intourist SS, onu unroot listesinin altına yapıştırıyor ve burada sahip

63
00:04:26,470 --> 00:04:32,670
olduğumuz şeref listesi için sınıf seçicisinin aynı noktalı slayt gösterileri ve sonra söylüyorum Listedeki

64
00:04:33,040 --> 00:04:38,950
her listeyi seçmek için yine genişlik ve yüksekliği yüzde 100 olarak ayarlayın.

65
00:04:38,950 --> 00:04:40,570
Bu yüzden burada bu

66
00:04:40,600 --> 00:04:47,470
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.

67
00:04:47,470 --> 00:04:53,100
Ve görüntülerin sayfanın tüm alanını kaplamasına izin verecek olan şey budur.

68
00:04:53,110 --> 00:04:56,240
Ayrıca, sırt pozisyonumuzu yüzde 50 ila yüzde 50'ye ayarladık.

69
00:04:56,430 --> 00:04:59,660
Ve bu, resimleri sayfanın merkezinde mükemmel bir şekilde merkezileştirecek.

70
00:04:59,660 --> 00:05:02,720
Sonra son olarak, arka planı mutlu etmekten mutlu olduk.

71
00:05:03,010 --> 00:05:06,870
Burada görüntünün dikey veya yatay olarak tekrarlanmadığı yerler.

72
00:05:07,060 --> 00:05:13,330
sonra burada biraz yaratacağımız animasyonu yavaş yavaş bir opaklığa dönüştürmek için kullanacağız.

73
00:05:13,330 --> 00:05:17,650
Opaklığını sıfıra ayarladık çünkü resimlerimizin solmaya başlamasını istiyoruz ve

74
00:05:17,770 --> 00:05:22,930
Z dizinini sıfıra ayarladık yine de bu, arka plan görüntülerinin metnin ve

75
00:05:23,020 --> 00:05:24,790
düğmenin arkasına yerleştirilmesini sağlayacaktır.

76
00:05:25,150 --> 00:05:29,540
Burada sahip olduğumuz son mülkeye animasyon deniyor ve daha önce görmediğimiz bir şey.

77
00:05:29,590 --> 00:05:33,430
Dolayısıyla bu, aslında görüntüleri solup sarmamıza izin verecek.

78
00:05:33,490 --> 00:05:38,920
Dolayısıyla animasyonun adı resim animasyonudur ve bu, dakikalar içinde burada yaratılacağımız

79
00:05:38,920 --> 00:05:44,430
animasyonla eşleştiği sürece onu istediğiniz gibi arayabileceğiniz keyfi olur ve ardından

80
00:05:44,430 --> 00:05:46,950
animasyonun 50 saniye boyunca sürmesini söyleriz.

81
00:05:47,130 --> 00:05:51,780
Doğrusal olduğundan ve doğrusal olanın ne olduğundan emin olarak, animasyonun başından

82
00:05:51,780 --> 00:05:54,120
sonuna kadar aynı hızda olduğu gösteriliyor.

83
00:05:54,150 --> 00:05:57,370
Ve son olarak, animasyonun sonsuza kadar dönmesini söylüyoruz.

84
00:05:57,480 --> 00:05:59,410
Bu şekilde slayt şovumuz hiç bitmiyor.

85
00:06:01,160 --> 00:06:05,810
Bu yüzden diyebiliriz ancak önizleme yaparsak hiçbir şey gösterilmeyecektir, çünkü animasyonu

86
00:06:05,810 --> 00:06:06,430
kurmamız gerekiyor.

87
00:06:06,530 --> 00:06:10,130
Ayrı ayrı liste öğelerine göre ayarlanmış herhangi bir görüntü de yok.

88
00:06:10,130 --> 00:06:11,580
O halde devam edin ve şimdi bunu yapalım.

89
00:06:15,890 --> 00:06:20,900
Bu nedenle, slayt listesinin tüm listesini öğelerin alt seçicilere kopyalayacağız ve

90
00:06:20,900 --> 00:06:24,390
bu, arka plan görüntülerini gerçek liste öğelerine ekleyecek.

91
00:06:30,790 --> 00:06:37,690
Dolayısıyla şimdi ve beş çocuk biriyle başlayıp beş yaşına kadar olan beş liste öğesinin

92
00:06:37,690 --> 00:06:38,470
olduğunu görebiliyoruz.

93
00:06:38,520 --> 00:06:44,050
Her birinize rolünüzün arka plan görüntüsünü veriyoruz ve isterseniz bu yerlilerle bağlantı kurabilir

94
00:06:44,050 --> 00:06:48,030
veya resimleri görüntü dizininin içindeki genel dizininizin içine yerleştirebilirsiniz.

95
00:06:48,070 --> 00:06:53,020
Ben devam ettim ve sadece onları resim yükleyeceğim veya bu web'de ücretsiz bir yükleme hizmeti.

96
00:06:53,200 --> 00:06:58,780
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.

97
00:06:58,780 --> 00:06:59,390
Web

98
00:06:59,770 --> 00:07:02,740
İlk arka plan resmi için animasyon derhal başlayacak.

99
00:07:02,830 --> 00:07:05,030
Dolayısıyla, animasyon geciktirmek zorunda değiliz.

100
00:07:05,110 --> 00:07:09,570
Her görüntünün bir önceki resmin 10 saniyesinden sonra sönmesini istiyoruz.

101
00:07:09,580 --> 00:07:15,290
Böylece bir sonraki resim animasyon gecikmesini 10 saniyeye ayarladım ve bundan sonra her resim için 10 artacağım.

102
00:07:15,430 --> 00:07:20,590
Yani 20 saniyelik üçüncü 30, dördüncü 40, beşi 40 bize 50 saniyeye

103
00:07:20,590 --> 00:07:24,320
kadar ilerleyecek ve bir numara resimden tekrar başlayacak.

104
00:07:25,150 --> 00:07:30,460
ş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.

105
00:07:30,460 --> 00:07:35,600
Öyleyse yine de devam edebiliriz ve CSSA dosyasına iniş yapmayı söyleyebiliriz ancak henüz hiçbir

106
00:07:35,620 --> 00:07:41,330
Şimdi devam edin ve şimdi bunu yapın.

107
00:07:41,420 --> 00:07:48,400
Bu yüzden öğreticiden anahtar kareler resim animasyon kuralını kopyalayıp buraya yapıştıracağım.

108
00:07:54,240 --> 00:08:01,590
Yaptığımız şey, at çerçeve seçicisini alarak animasyona resim animasyon ismini veriyor.

109
00:08:01,590 --> 00:08:07,490
Ve bu, slayt gösterimizdeki animasyon mülkiyetimiz için sahip olduğumuz önceki

110
00:08:07,500 --> 00:08:09,900
değerle uyuşan kurallarla eşleşti.

111
00:08:09,900 --> 00:08:16,150
Dolayısıyla, yapacağımız şey, animasyon içindeki çeşitli ana karelerde ne yapmak

112
00:08:16,200 --> 00:08:17,700
istediğimizi göstermek.

113
00:08:17,820 --> 00:08:23,520
Dolayısıyla animasyon yüzde sıfırdan yüzde 100'e iniyor, ancak yalnızca yüzde sıfırdan

114
00:08:23,520 --> 00:08:24,800
yüzde 30'la ilgileniyoruz.

115
00:08:25,110 --> 00:08:31,230
Dolayısıyla, burada olması, donukluk için sıfırdan başlayıp yüzde 10'luk bir

116
00:08:31,230 --> 00:08:32,220
artışla başlıyoruz.

117
00:08:32,370 --> 00:08:34,260
Uzaya gitmesine izin verdik.

118
00:08:34,290 --> 00:08:41,580
Opaklığı yüzde 20'lik bir oranda bıraktığımızda yüzde 30'la sıfıra

119
00:08:41,580 --> 00:08:43,110
geri döndük.

120
00:08:43,110 --> 00:08:50,040
mülkiyet animasyon zamanlama işleve sahip olduğumuzun farkına varırsınız ve sonra da hafifletme eğilimi gösterir.

121
00:08:50,040 --> 00:08:53,100
0'dan 10'a kadar kolaylaştırmak için ayarlanmış

122
00:08:53,160 --> 00:08:58,030
Böylece, 0'dan 1'e kadar Faden'e dönüştüğümüzde daha düzgün bir geçiş sağlıyor.

123
00:08:58,920 --> 00:09:02,200
Dolayısıyla, bu yüzdelerle nereden geldiğimizi merak ediyor olabilirsiniz.

124
00:09:02,400 --> 00:09:08,840
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.

125
00:09:09,840 --> 00:09:16,020
Yani temel olarak sıfır saniye ile 10 saniye arasında hareket edecek bir görüntü var ve

126
00:09:16,020 --> 00:09:17,880
ikinci görüntü 10'dan 20'ye gidiyor.

127
00:09:17,880 --> 00:09:25,510
Üçüncüsü 20-30, sonra 30-40 ve sonra 40-50, her biri 10 saniyede beş resim oluşturuyor.

128
00:09:25,740 --> 00:09:32,340
solan görüntü var ve 10 saniye ile 15 saniye arasında bir sonraki görüntüye geçeceğiz.

129
00:09:32,340 --> 00:09:40,000
Sıfır saniye ile 10 saniye arasında beş saniyede bir Faden var ve ardından bir imgenin solukluğunda

130
00:09:40,260 --> 00:09:47,330
Yani bu, solen olan ve sonra turuncu renkte olan kırmızı renkte solan Mavi ile temsil edilebilir.

131
00:09:47,700 --> 00:09:54,810
İlk görüntü yüzde 0'dan yüzde 10'a, sıfır saniyeden beş saniyeye doğru soluyor

132
00:09:54,810 --> 00:09:59,250
ve yüzde 10'dan yüzde 20'ye kadar sağlam kalıyor.

133
00:09:59,250 --> 00:10:03,330
Dolayısıyla,% 10 ila% 20 arasında macunsu bir pasta var.

134
00:10:03,570 --> 00:10:08,920
Ve sonra yüzde 20'den yüzde 30'a, aslında birinden sıfıra doğru soluyor.

135
00:10:09,270 --> 00:10:16,200
Ve bu gerçekleştiğinde, animasyonun başında 10 saniyede başlamış bir sonraki resim, sıfırdan

136
00:10:16,290 --> 00:10:18,870
1'e 10-15 arasında olacak.

137
00:10:18,870 --> 00:10:22,070
Ve bu, çapraz geçiş efekti yaratmak için burada örtüşecektir.

138
00:10:22,290 --> 00:10:27,510
Dolayısıyla bu beş saniye sağlam kalıyor ve sonra başka bir çakışmaya dönüşüyoruz

139
00:10:27,510 --> 00:10:34,990
ve bir sonraki resim kayboluyor ve aynı desen, animasyonun sonu olan 50 saniyeye varıncaya kadar tekrar ediyor.

140
00:10:35,040 --> 00:10:36,630
Bu görüntü katı.

141
00:10:36,840 --> 00:10:42,200
Ve sonra, beşinci görüntü soluklaştıkça orijinal görüntüsünün solduğu başın sonuna kadar

142
00:10:42,210 --> 00:10:47,300
geri gideriz ve tekrar tekrar başlar ve sonsuza kadar döngüyüz.

143
00:10:47,340 --> 00:10:51,910
Öyleyse devam edin ve ABD'yi kurtaralım ve web kamerasını açın.

144
00:10:52,020 --> 00:10:56,380
Sunucularınızın çalışıp çalışmadığından ve yenilendiğinden emin olun ve canlı animasyon görebilirsiniz.

145
00:11:02,590 --> 00:11:07,530
Dolayısıyla bu görüntü beş saniyeliğine görünür durumda ve bir sonraki resim kaybolana kadar solacak.

146
00:11:07,630 --> 00:11:09,450
Bu beş saniyelik bir geçiş.

147
00:11:09,550 --> 00:11:13,870
Bu fotoğraftan beş saniye daha sonra alıyoruz ve sonra bir sonraki fotoğrafa geçeceğiz.

148
00:11:16,550 --> 00:11:22,070
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.

149
00:11:22,190 --> 00:11:29,420
Öğreticiye burada geri dönüyorum ve en altta bu kural var ya kopyalamalıyım.

150
00:11:29,420 --> 00:11:31,380
Başarınızı geri getirin.

151
00:11:31,440 --> 00:11:38,540
modernizer tarafından eklendi ve daha önce modernizörler CD'si vardı ve nasıl burada baktığımızı

152
00:11:38,540 --> 00:11:45,680
bilmek istiyorsanız hemen burada. up modernizer CDR ve ben bir tane aldım.

153
00:11:45,680 --> 00:11:54,600
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

154
00:11:55,760 --> 00:12:02,420
Bu yüzden sadece dosya sürümünü kopyalamayı bitirip başta bir komut dosyası etiketine

155
00:12:02,420 --> 00:12:08,270
ekledim ve betiği, bu javascript'in sayfadaki diğer öğelerle eşzamanlı olarak patlatmasını

156
00:12:08,270 --> 00:12:10,510
sağlayan bir senkronizasyona ayarladım.

157
00:12:11,420 --> 00:12:16,330
CSSA'ya geri dönersek, kapasitelerinin yalnızca 1 olarak ayarlandığını görebiliriz.

158
00:12:16,340 --> 00:12:21,500
Yani burada olacak olan şey, sistem entegrasyonunu desteklemeyen tarayıcıların görünür bir slayta

159
00:12:21,500 --> 00:12:25,250
sahip olması ve bu görüntünün arka planı olacağıdır.

160
00:12:27,070 --> 00:12:30,390
Böylece tam ekran arka plan resmi kaydırma çubuğu için.

161
00:12:30,550 --> 00:12:33,640
Şimdilik olduğu gibi sorularınız varsa, bir sonraki videoyu göreceğim.

162
00:12:33,640 --> 00:12:34,000
Teşekkürler.