1
00:00:04,260 --> 00:00:08,990
そのチュートリアルに戻って次のステップはC-s私たちの仕事を始めることです。

2
00:00:09,150 --> 00:00:13,420
したがって、新しいC S Sファイルとパブリックスタイルシートを作成して呼び出す必要があります。

3
00:00:13,590 --> 00:00:15,280
その成功。

4
00:00:15,510 --> 00:00:20,860
だから私たちがここに戻ってきたら、パブリックディレクトリに移動します。すでに開いているようなスタイルシートが開いています。新しいファイルを作成するには右クリックしてください。

5
00:00:20,940 --> 00:00:24,930
 

6
00:00:24,930 --> 00:00:26,350
Blandingはそうだ。

7
00:00:27,430 --> 00:00:32,120
今、私がそれを開いたら、それは空白で、私たちのメインページをスタイルするすべてのルールで記入する準備が整いました。

8
00:00:32,130 --> 00:00:35,530
 

9
00:00:36,150 --> 00:00:41,450
だから、ここで最初にやってみたいのは、私たちがやったDanciuの言うことを学ぶオープンな学習です。

10
00:00:41,590 --> 00:00:44,750
また、ボディの背景色をブロックに設定したいと考えています。

11
00:00:44,800 --> 00:00:46,120
好きな色を選ぶことができます。

12
00:00:46,120 --> 00:00:50,860
私はちょうど黒い背景から最初のイメージにフェードインしてそこからクロスフェードを始めるのがいいと思う。

13
00:00:50,860 --> 00:00:51,980
 

14
00:00:55,530 --> 00:01:00,300
このルールに貼り付けたのは、bodyタグを選択してから色をハッシュに設定することです。

15
00:01:00,300 --> 00:01:01,230
 

16
00:01:01,270 --> 00:01:07,530
黒と同じ0 0 0。

17
00:01:07,610 --> 00:01:13,010
だから私はすべての文脈の位置を必要とし、私たちが持っているすべてのキャンプ場をIDで選択するのを見る。

18
00:01:13,010 --> 00:01:13,720
 

19
00:01:13,760 --> 00:01:19,290
そこで、IDセレクタを使用してBlandingダッシュヘッダを使用します。

20
00:01:19,870 --> 00:01:24,630
ここで行ったことは、このテキストを取り上げてzインデックスを1にしたことです。

21
00:01:24,640 --> 00:01:29,700
ですから、あなたがzインデックスについて知らなければ、基本的にウェブページは3次元平面上で見ることができます。

22
00:01:29,860 --> 00:01:36,310
私たちはXとYを上下左右に持っていて、そしてZを前方と後方に向かって宇宙に持っています。

23
00:01:36,310 --> 00:01:40,120
だから1のzインデックスを与えると、それは私たちに向かって来ている。

24
00:01:40,240 --> 00:01:45,860
静的な静的以外のものから位置を変更しなければならないzインデックスを使用できるように、zインデックスが1より小さい他のコンテンツの上にレイヤーを重ねると、すべてのHTML要素のデフォルトの位置の値になります。

25
00:01:45,860 --> 00:01:50,980
 

26
00:01:50,980 --> 00:01:54,380
 

27
00:01:54,580 --> 00:01:58,300
そして静的を使うと、実際にはzのインデックスは無視されます。

28
00:01:58,300 --> 00:02:01,080
今私たちがやりたいことは、そのテキストとボタンを中心にすることです。

29
00:02:01,090 --> 00:02:05,440
だから私はここでテキスト整列の中心を使用して、それは私たちを水平に中心に置くでしょう。

30
00:02:05,470 --> 00:02:09,730
 

31
00:02:09,730 --> 00:02:15,880
今、私たちがページ上で垂直方向に引くためには、実際にはこれを行う方法がたくさんありますが、最も簡単な方法はビューの高さを使うことだけです。

32
00:02:15,910 --> 00:02:19,920
ここでは、パディングの高さを40の高さに設定します。

33
00:02:20,230 --> 00:02:24,690
私が50歳で遊んでいない理由は、それが実際にコンテンツをより低く抑えるからです。

34
00:02:24,700 --> 00:02:26,490
そして、それは中心にあるように見えます。

35
00:02:27,010 --> 00:02:33,380
そこで、このルールをここに戻って保存して、リフレッシュすると、背景が黒く、下が見えます。

36
00:02:33,930 --> 00:02:35,220
 

37
00:02:35,290 --> 00:02:35,560
うん。

38
00:02:35,580 --> 00:02:40,020
ここで更新できるようにするには、テキストをページの中央に配置できません。

39
00:02:40,150 --> 00:02:42,710
少し良く見てください。

40
00:02:42,720 --> 00:02:47,630
だから、あなたのキャンプのテキストへようこそはほとんど見えないので、ここでそれを1秒で変更します。

41
00:02:49,800 --> 00:02:57,030
そして、着陸ヘッドやSlichterにH1セレクターを追加し、色を1に変更するように見えます。

42
00:02:57,030 --> 00:02:58,960
 

43
00:02:59,700 --> 00:03:07,200
それではここに追加して、ページをリフレッシュしてテキストを見るのがはるかに簡単になると言うでしょう。

44
00:03:07,270 --> 00:03:11,170
私たちがそこに背景を置くと、それを見るのがより簡単になります。

45
00:03:13,730 --> 00:03:17,080
だから次は、順序付けされていないリストをスタイルすることです。

46
00:03:17,360 --> 00:03:21,370
リストにはスライドショーのクラスがあることを知っているので、スライドするのはとても簡単です。

47
00:03:21,650 --> 00:03:25,040
だから私はこのルールを取って、ここでそれを接続します。

48
00:03:25,580 --> 00:03:32,330
だから私たちはそのクラスで名誉のない人を選んだのです。高さ内に置かれた位置を100％に設定して、ページ全体を取り上げてから、トップレベルの位置を使ってページの左上隅に移動しますゼロの

49
00:03:32,390 --> 00:03:38,060
 

50
00:03:38,060 --> 00:03:41,360
 

51
00:03:41,690 --> 00:03:44,890
そして、ここに見れば、zインデックスはゼロに設定されています。

52
00:03:45,000 --> 00:03:49,940
これは、私たちのビューやキャンプ場であなたのテキストを歓迎しているような背景の画像が他のコンテンツの背後にあることを確認します。

53
00:03:49,970 --> 00:03:52,130
 

54
00:03:53,910 --> 00:03:55,070
リストスタイルを設定します。

55
00:03:55,080 --> 00:03:58,240
そして、この戦争で弾丸はそのように指摘します。

56
00:03:58,240 --> 00:04:00,340
我々はリスト項目からそれらを見ていない。

57
00:04:00,340 --> 00:04:03,170
最後に、マージンやパディングがないことを確認する必要があります。

58
00:04:03,340 --> 00:04:05,180
そこで、これらを両方ともゼロに設定します。

59
00:04:05,620 --> 00:04:08,530
今我々はここに戻って保存し、我々は新鮮だった。

60
00:04:08,770 --> 00:04:12,480
ここの左手にある弾丸が消えているのが分かります。

61
00:04:16,660 --> 00:04:19,670
今度は実際に個々のリスト項目のスタイルを設定する必要があります。

62
00:04:19,780 --> 00:04:26,460
だから私たちはここにこのルールを引っ張り出してコピーします。Intourist

63
00:04:26,470 --> 00:04:32,670
SSはそれを非ルーテッドリストの下に貼り付けます。ここでは名誉リストのクラスセレクタのスライドショーと同じドットをつけていますリスト内の各リスト項目を選択するには、もう一度幅と高さを100％に設定します。

64
00:04:33,040 --> 00:04:38,950
 

65
00:04:38,950 --> 00:04:40,570
 

66
00:04:40,600 --> 00:04:47,470
今回は絶対上端と左端のどちらかに設定するか、バックグラウンドサイズを0に設定してカバーします。

67
00:04:47,470 --> 00:04:53,100
そして、これはイメージがページのスペース全体を占めるようにするものです。

68
00:04:53,110 --> 00:04:56,240
私たちはまた、50パーセント50％に私たちのバックポジションを設定します。

69
00:04:56,430 --> 00:04:59,660
そして、これは画像をページ上に完全に集中させます。

70
00:04:59,660 --> 00:05:02,720
最後に、私たちはバックグラウンドを何も繰り返さないようにしました。

71
00:05:03,010 --> 00:05:06,870
これは、画像が縦方向または横方向に繰り返されない場所です。

72
00:05:07,060 --> 00:05:13,330
私たちは、不透明度をゼロに設定します。なぜなら、画像をフェードアウトさせたいからです。ここで作成するアニメーションを少しずつゆっくりとフェードアウトして1の不透明度にします。

73
00:05:13,330 --> 00:05:17,650
 

74
00:05:17,770 --> 00:05:22,930
私たちはzインデックスをゼロに設定しましたが、これはバックグラウンド画像がテキストとボタンの後ろに配置されるようにします。

75
00:05:23,020 --> 00:05:24,790
 

76
00:05:25,150 --> 00:05:29,540
私たちがここに持っている最後のプロパティはアニメーションと呼ばれています。これはこれまで見たことのないものです。

77
00:05:29,590 --> 00:05:33,430
これは実際に画像をフェードインまたはフェードインさせることになります。

78
00:05:33,490 --> 00:05:38,920
 

79
00:05:38,920 --> 00:05:44,430
 

80
00:05:44,430 --> 00:05:46,950
したがって、アニメーションの名前はイメージアニメーションです。これは分単位でここで作成するアニメーションと一致する限り任意のものを呼び出すことができ、アニメーションを50秒間持続するように指示します。

81
00:05:47,130 --> 00:05:51,780
それが線形であることを確認し、線形の意味はアニメーションが最初から最後まで同じスピードであることを示すことです。

82
00:05:51,780 --> 00:05:54,120
 

83
00:05:54,150 --> 00:05:57,370
最後に、アニメーションを無限にループするように指示します。

84
00:05:57,480 --> 00:05:59,410
そうすれば、私たちのスライドショーは決して終わらない。

85
00:06:01,160 --> 00:06:05,810
だから私たちはこれを言うことができますが、プレビューすればまだアニメーションが設定されていないので、何も表示されません。

86
00:06:05,810 --> 00:06:06,430
 

87
00:06:06,530 --> 00:06:10,130
また、個々のリスト項目に画像が設定されていない。

88
00:06:10,130 --> 00:06:11,580
さあ、今すぐやってみましょう。

89
00:06:15,890 --> 00:06:20,900
そこで、スライドショーリストのすべてのアイテムを子セレクタにコピーし、実際のリストアイテムにバックグラウンドイメージを追加します。

90
00:06:20,900 --> 00:06:24,390
 

91
00:06:30,790 --> 00:06:37,690
だから今、私たちは、5つまでのすべての方法を行っている子供1つから始まる5つのリスト項目があることがわかります。

92
00:06:37,690 --> 00:06:38,470
 

93
00:06:38,520 --> 00:06:44,050
それぞれの人に背景画像を与え、必要に応じてこれらの地元の人々にリンクしたり、パブリックディレクトリ内の画像を画像ディレクトリ内に置くことができます。

94
00:06:44,050 --> 00:06:48,030
 

95
00:06:48,070 --> 00:06:53,020
私は先に進み、画像を使ってアップロードするか、これはウェブ上の無料のアップロードサービスです。

96
00:06:53,200 --> 00:06:58,780
実際にあなたのWebサイトで使用するイメージのホスティングを意図したものではありませんが、手元にある簡単な修正です。

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

98
00:06:59,770 --> 00:07:02,740
最初の背景画像のアニメーションはすぐに開始されます。

99
00:07:02,830 --> 00:07:05,030
したがって、アニメーションの遅延を与える必要はありません。

100
00:07:05,110 --> 00:07:09,570
前の画像の10秒後に各画像がフェードインされるようにします。

101
00:07:09,580 --> 00:07:15,290
そこで私は、次の画像アニメーションの遅延を10秒に設定し、その後、すべての画像について10ずつ増やします。

102
00:07:15,430 --> 00:07:20,590
したがって、3回目は30秒間、3回目は30秒間、4回目は40秒間、20秒間は50秒間続き、画像1で再び開始します。

103
00:07:20,590 --> 00:07:24,320
 

104
00:07:25,150 --> 00:07:30,460
CSSAファイルで着陸を宣言することもできますが、すべての部分がゼロに設定されているため、アニメーションを1つにフェードインするように設定していないため、まだ何も見ません。

105
00:07:30,460 --> 00:07:35,600
 

106
00:07:35,620 --> 00:07:41,330
だから先に進んでください。

107
00:07:41,420 --> 00:07:48,400
そこで、チュートリアルのキーフレーム画像アニメーションルールをコピーして、ここに貼り付けます。

108
00:07:54,240 --> 00:08:01,590
そこで、私たちがやっているのは、フレームセレクタを使ってアニメーションにイメージアニメーションの名前を付けることです。

109
00:08:01,590 --> 00:08:07,490
これは、スライドショーのアニメーションプロパティの以前の値と一致します。これはスライドルールです。

110
00:08:07,500 --> 00:08:09,900
 

111
00:08:09,900 --> 00:08:16,150
だから私たちがやることは、アニメーション内のさまざまなキーフレームで何が起こりたいのかを示すことです。

112
00:08:16,200 --> 00:08:17,700
 

113
00:08:17,820 --> 00:08:23,520
したがって、アニメーションは0％から100％まで変化しますが、我々は0％から30％のみに関心があります。

114
00:08:23,520 --> 00:08:24,800
 

115
00:08:25,110 --> 00:08:31,230
ここで何が起きるかは、不透明度のアニメーションを0にしてから10％までアニメーションを開始することです。

116
00:08:31,230 --> 00:08:32,220
 

117
00:08:32,370 --> 00:08:34,260
私たちはそれを宇宙に消えさせます。

118
00:08:34,290 --> 00:08:41,580
不透明度を20％まで1つ残しておき、30％で0に戻すことができます。

119
00:08:41,580 --> 00:08:43,110
 

120
00:08:43,110 --> 00:08:50,040
また、プロパティのアニメーションタイミング関数が0から10まで緩やかに設定されていることがわかりました。その後、アニメーションタイミング機能も緩和されます。

121
00:08:50,040 --> 00:08:53,100
 

122
00:08:53,160 --> 00:08:58,030
これにより、0から1に落ち着くように、より滑らかな遷移が得られます。

123
00:08:58,920 --> 00:09:02,200
だから、あなたがこれらのパーセンテージをどこに思いついたのか疑問に思うかもしれません。

124
00:09:02,400 --> 00:09:08,840
そこで、私は先に進み、ここで起こっていることをよりよく視覚化するのに役立つアニメーションのグラフを作成しました。

125
00:09:09,840 --> 00:09:16,020
したがって、基本的には、0秒から10秒までアニメーション化されるイメージがあり、次に2番目のイメージは10から20になります。

126
00:09:16,020 --> 00:09:17,880
 

127
00:09:17,880 --> 00:09:25,510
20から30までの3番目と30から40まで、そして40から50まではそれぞれ10秒で5つの画像を作ります。

128
00:09:25,740 --> 00:09:32,340
 

129
00:09:32,340 --> 00:09:40,000
したがって、0秒から10秒までは5秒のフェーデンがあり、次に1の不透明度でフェードインされた画像を取得し、10秒から15秒にフェードインして次の画像にフェードインします。

130
00:09:40,260 --> 00:09:47,330
これは赤で消えている青で表現することができます。青は赤で消え、次に消えてオレンジ色になります。

131
00:09:47,700 --> 00:09:54,810
そのため、最初の画像は0％から10％になり、0秒から5秒にフェージングされ、10％から20％まで堅調に維持されます。

132
00:09:54,810 --> 00:09:59,250
 

133
00:09:59,250 --> 00:10:03,330
だから、あなたはペースト状のペースト状のものの10〜20％を持っていることがわかります。

134
00:10:03,570 --> 00:10:08,920
そして、20％から30％へと、実際には1％から0％に減少しています。

135
00:10:09,270 --> 00:10:16,200
そしてそれが起こっているので、アニメーションがすでに10秒で始まっている次のイメージは、0から1の10から15になるでしょう。

136
00:10:16,290 --> 00:10:18,870
 

137
00:10:18,870 --> 00:10:22,070
そして、それがここで重なり合い、このクロスフェード効果を作り出します。

138
00:10:22,290 --> 00:10:27,510
 

139
00:10:27,510 --> 00:10:34,990
これは5秒間安定していて、次にフェードアウトすると次の画像がフェードインし、同じパターンがアニメーションの最後である50秒になるまで繰り返されます。

140
00:10:35,040 --> 00:10:36,630
この画像は堅実です。

141
00:10:36,840 --> 00:10:42,200
そして、元の画像がぼやけてしまい、5枚目の画像がぼんやりと消えてから、何度も繰り返し始まり、無限にループするように、元に戻って行きます。

142
00:10:42,210 --> 00:10:47,300
 

143
00:10:47,340 --> 00:10:51,910
だから私たちの米国を救い、ウェブカメラを開こうとしましょう。

144
00:10:52,020 --> 00:10:56,380
サーバーが稼働していることを確認して、アニメーションをライブで見ることができます。

145
00:11:02,590 --> 00:11:07,530
この画像は5秒間表示され、次の画像がフェードインするとフェードアウトします。

146
00:11:07,630 --> 00:11:09,450
それは5秒の移行です。

147
00:11:09,550 --> 00:11:13,870
私たちはこの写真の5秒以上を取得し、次の写真にフェードアウトします。

148
00:11:16,550 --> 00:11:22,070
だから最後にしたいのは、私たちの背景スライダがすべてのブラウザで動作することを確認することです。

149
00:11:22,190 --> 00:11:29,420
そこでチュートリアルの最後に、ここでは私はこのルールを持っています。

150
00:11:29,420 --> 00:11:31,380
あなたの成功にそれを戻してください。

151
00:11:31,440 --> 00:11:38,540
 

152
00:11:38,540 --> 00:11:45,680
下に貼り付けると、古いCSSのアニメーションをサポートしていない古いブラウザがあることがわかります。Klownsはモダナイザによって追加されています。すでに近代化CDがありました。私は最初のCDRを選んだ。

153
00:11:45,680 --> 00:11:54,600
 

154
00:11:55,760 --> 00:12:02,420
 

155
00:12:02,420 --> 00:12:08,270
 

156
00:12:08,270 --> 00:12:10,510
だから私はちょうどファイルのバージョンをコピーして終了し、私は頭の中のスクリプトタグにそれを追加し、私はこのJavaScriptがページ上の他の資産と同時に吹くようにする同期にスクリプトを設定します。

157
00:12:11,420 --> 00:12:16,330
CSSAに戻ると、容量が1に設定されていることがわかります。

158
00:12:16,340 --> 00:12:21,500
ここで何が起きるかは、システムインテグレーションをサポートしていないブラウザでは、スライドが1つしか表示されず、その画像の背景になります。

159
00:12:21,500 --> 00:12:25,250
 

160
00:12:27,070 --> 00:12:30,390
それはフルスクリーンの背景画像スライダーのためです。

161
00:12:30,550 --> 00:12:33,640
ちょうど今のような質問があれば、私は次のビデオを見るでしょう。

162
00:12:33,640 --> 00:12:34,000
ありがとう。