1
00:00:00,210 --> 00:00:03,460
次に取り組むのは体の背景です。

2
00:00:03,660 --> 00:00:08,430
そして、実際にはこれは背景画像ではありませんが、このように見えるものが見つかるとうまくいくでしょう。

3
00:00:08,430 --> 00:00:09,270
 

4
00:00:09,420 --> 00:00:13,590
しかし、それは実際にCSXが私のために追加しているグラデーションです。

5
00:00:13,650 --> 00:00:19,430
 

6
00:00:19,470 --> 00:00:25,290
 

7
00:00:25,560 --> 00:00:27,470
したがって、本質的には線形グラデーションを書くことができます。独自のグラデーションを作成するのではなく、私たちが作業することができるいくつかの素晴らしいプリミティブカラーグラデーションを備えた素晴らしいリソースを紹介します。自分の。

8
00:00:27,750 --> 00:00:29,850
それはグラデーションドットコムと呼ばれています。

9
00:00:30,030 --> 00:00:35,580
そしてそれには、いくつかの勾配があり、矢印キーを使ってそれらのいくつかを見ることができます。

10
00:00:36,180 --> 00:00:39,860
だから、私が好きなものを見つけるまで、私はちょうど行った。

11
00:00:40,050 --> 00:00:46,080
 

12
00:00:46,080 --> 00:00:52,120
だから私が必要とするのは、CSSAコードを入手するか、またはEnterキーを押してこのコードをクリップボードにコピーして本文を選択するだけです。

13
00:00:52,360 --> 00:00:56,960
だからボディとペーストでそれを貼ります。

14
00:00:57,540 --> 00:01:02,610
実際には1行にすぎませんが、ブラウザの接頭辞はすべて異なります。

15
00:01:02,880 --> 00:01:09,130
Opera用Internet Explorer Firefox for Chromeのプレフィックス

16
00:01:09,240 --> 00:01:09,990
しかし、それは何ですか。

17
00:01:10,020 --> 00:01:16,170
バックグラウンドを線形グラデーションに設定し、2つのカラーとそれらのカラーの異なるパーセンテージと角度を選択しています。

18
00:01:16,170 --> 00:01:18,740
 

19
00:01:18,750 --> 00:01:24,390
だから私たちが私たちをリフレッシュするなら、それが今のように見えるようにしましょう。

20
00:01:24,390 --> 00:01:26,190
この素晴らしいグラデーションがあります。

21
00:01:26,580 --> 00:01:28,420
だから私たちはそこで遊ぶことができます。

22
00:01:28,620 --> 00:01:31,890
あなたはもう少しチェックアウトして、自分のものを自由に使うことができます。

23
00:01:31,980 --> 00:01:35,860
私が決めたものはボラボラとここで呼ばれています。

24
00:01:36,210 --> 00:01:42,840
そのコピーをクリップボードにコピーしてこのコードを置き換えます。

25
00:01:42,840 --> 00:01:49,410
この新しい勾配は、ここではもう一つ別の線形勾配であり、他の誰かが2つの色をそれぞれ別の割合で書きました。

26
00:01:49,410 --> 00:01:52,870
 

27
00:01:53,150 --> 00:01:54,450
そして私たちは救います。

28
00:01:54,780 --> 00:01:56,250
そして今すぐチェックしてみてください。

29
00:01:56,520 --> 00:01:57,830
そしてそこに行く。

30
00:01:57,840 --> 00:01:59,190
だから我々は近づいている。

31
00:01:59,430 --> 00:02:02,860
私たちが取り組むべき大きなものはアイコンです。

32
00:02:03,060 --> 00:02:05,530
そこで、プラスのアイコンが表示されます。

33
00:02:05,640 --> 00:02:10,130
これはフォームを表示して非表示にしてからごみ箱を持っていることです。

34
00:02:10,130 --> 00:02:16,100
これらのアイコンをfontというライブラリの一部に含める必要があることもわかります。

35
00:02:16,110 --> 00:02:16,780
驚くばかり。

36
00:02:17,050 --> 00:02:22,650
だから素晴らしいフォントに行くと、WebサイトのためのちょうどFonte素晴らしいです。

37
00:02:22,660 --> 00:02:24,030
私は彼女を取得する

38
00:02:24,930 --> 00:02:29,660
そしてそれはすべての束のアイコンです。

39
00:02:29,970 --> 00:02:36,780
ですから、私たちがアイコンの下を見ると、あなたが見ることができるように私たちが使うことができるすべての異なるアイコンの巨大なリストがあります。

40
00:02:38,260 --> 00:02:39,720
 

41
00:02:40,380 --> 00:02:48,030
そのため、このライブラリをアプリケーションの中に組み込む必要があります。そこでダウンロードしてダウンロードしてください。また、フォントをダウンロードすることもできます。

42
00:02:48,030 --> 00:02:52,740
 

43
00:02:52,740 --> 00:02:57,370
素晴らしいCDNだけでなく、これらのCDNのいずれかを使用してください。

44
00:02:57,450 --> 00:02:58,710
いずれかが動作します。

45
00:02:59,100 --> 00:03:06,030
ですから、すでにJayのクエリをダウンロードしているので、CDを使用してそのリンクをコピーします。

46
00:03:07,470 --> 00:03:15,780
その後、私はインデックスページのTimoに行きます。リンクタグを追加する必要があります。CSSAファイルなので、実際にはjavascriptファイルやフォントではありませんが、C

47
00:03:15,780 --> 00:03:23,100
Ssファイルで保存します実際にはあらかじめ作成され、あらかじめ作成されている要素を追加できるクラスがたくさん用意されていますので、いくつか例を示します。

48
00:03:23,100 --> 00:03:29,540
 

49
00:03:29,550 --> 00:03:30,940
 

50
00:03:31,230 --> 00:03:40,740
バッテリーを空にするかバッテリーを3分の1と言うのかを知りたい場合は、クラスをfashと呼びます。ダッシュバッテリーダッシュ3つのダッシュコーターを追加する必要があります。

51
00:03:40,740 --> 00:03:47,760
 

52
00:03:49,140 --> 00:03:51,350
 

53
00:03:51,510 --> 00:03:53,400
それをH-1に入れましょう。

54
00:03:53,400 --> 00:03:58,980
それはアイコンのアイコンを表し、私たちはそれをクラスにして、ここに何も入れる必要はありません。

55
00:03:59,070 --> 00:04:02,560
私たちはそれを空白にしておき、これはRifanを素晴らしい状態にします。

56
00:04:02,700 --> 00:04:10,890
そして、これはアイコンの名前であり、リフレッシュを保存して、3分の1バッテリーアイコンではなく、そのバッテリーアイコンを持っています。

57
00:04:10,890 --> 00:04:13,500
 

58
00:04:13,500 --> 00:04:20,700
私たちはプラスサインとゴミ箱が欲しいので、ここではH-1の内部でアイコンを保持し、クラスを維持するが、Fを望む。

59
00:04:21,480 --> 00:04:28,070
A. 自分のアイコンを自由に使用することができます。

60
00:04:28,110 --> 00:04:33,420
 

61
00:04:33,420 --> 00:04:40,050
 

62
00:04:40,800 --> 00:04:48,330
 

63
00:04:48,330 --> 00:04:49,990
あなたが素晴らしいことを見つけるために行くと、私たちも鉛筆のようなアイコンや鉛筆や紙のいずれかを使用することができるので、あなたが好きな別のものを見つける場合、私は新鮮だったし、私たちが行う必要があるのは、それを最初に選択することなので、私たちは犬を選択します。

64
00:04:50,280 --> 00:05:00,000
Fはダッシュプラスで、ちょうどそのようにフローティングされ、最新の状態に更新されます。

65
00:05:00,960 --> 00:05:06,250
さあ、ゴミ箱に取り掛かりましょう。私たちはまだアニメーションを扱うつもりはありません。

66
00:05:06,300 --> 00:05:09,810
私たちはゴミ箱をXの代わりにまったく表示するようにしています。

67
00:05:10,260 --> 00:05:17,640
 

68
00:05:17,640 --> 00:05:27,030
 

69
00:05:27,030 --> 00:05:38,430
 

70
00:05:38,920 --> 00:05:44,520
だから私たちの元に戻って、私たちは実際にXを取り除くつもりで、私たちは別のeタグを追加しようとしており、e-TAGはFAAのクラスと名前ゴミ箱アイコンはFAAです。ダッシュゴミ箱を他のスパンにコピーしてください。これは、ページが読み込まれたときに既存のものだけが使用されますが、新しいものには3つのゴミ箱があります。

71
00:05:44,730 --> 00:05:46,280
我々はまだ元を扱っている。

72
00:05:46,530 --> 00:05:50,310
だから私たちはここでJavascriptに行きたい。

73
00:05:50,310 --> 00:05:54,990
新しいペンをつけると、Xでスパンを追加したくありません。

74
00:05:55,290 --> 00:06:00,930
アイコンを追加したいので、引用符が干渉しないようにする必要があります。

75
00:06:00,930 --> 00:06:08,290
したがって、ここで一重引用符を使用して保存すると、スパンの内側にゴミ箱アイコンが表示されます。

76
00:06:08,870 --> 00:06:10,830
だから新しいものをいくつか追加しましょう。

77
00:06:10,830 --> 00:06:11,650
そこに行く。

78
00:06:12,030 --> 00:06:15,320
また、まだスパンの内側にいるので、クリックすることはできます。

79
00:06:15,450 --> 00:06:18,680
つまり、スパンではなくアイコン要素です。

80
00:06:19,530 --> 00:06:22,440
だから私はまだイベントをクリックします。

81
00:06:22,470 --> 00:06:28,380
さて、この単純なアニメーションを作ってみましょう。これはすべてCで実行されます。ここでスパンは実際にページが読み込まれたときに隠されていると評価します。

82
00:06:28,380 --> 00:06:30,210
 

83
00:06:30,210 --> 00:06:31,630
彼らは豊かなゼロを持っています。

84
00:06:31,860 --> 00:06:38,760
私がマウスを動かすと、実際に幅を40ピクセルに拡大してから、トランジションプロパティを使ってアニメーション化しています。

85
00:06:39,030 --> 00:06:40,950
 

86
00:06:41,430 --> 00:06:44,070
それでは、いくつか試してみましょう。

87
00:06:44,400 --> 00:06:53,850
 

88
00:06:54,510 --> 00:07:06,270
私たちのCSSAファイルを開き、最初に行うスタイルはスパンスタイルなので、赤色の背景色を与えてリフレッシュします。

89
00:07:06,460 --> 00:07:10,820
そして今、私たちはその周りに赤い背景を持っています。

90
00:07:10,830 --> 00:07:19,470
次の作業は40ピクセルの高さですが、それほど多くはないようですが、さらにいくつかのプロパティを追加すると違いに気付くでしょう。

91
00:07:19,470 --> 00:07:22,680
 

92
00:07:23,250 --> 00:07:29,140
20ピクセル右に余白を加えて戻ってみましょう。

93
00:07:29,200 --> 00:07:34,420
今ここで私たちが望んでいた空間が与えられました。

94
00:07:35,550 --> 00:07:38,760
 

95
00:07:41,970 --> 00:07:45,700
次に、ここにテキストの中心を配置しましょう。これは、ここでスパンのわずかな違いです。

96
00:07:45,990 --> 00:07:55,110
重要なアイコンの中のアイコンは、アイコンを白すぎるように白すぎるようにすることです。

97
00:07:55,110 --> 00:07:55,970
大丈夫。

98
00:07:56,220 --> 00:08:01,730
だから私はアニメーションを使わずに最初にこのように見えるようにして、いつもそこにいるようにするつもりです。

99
00:08:01,740 --> 00:08:02,640
 

100
00:08:02,930 --> 00:08:06,830
そして、それらをアニメーション化して、移動するまで隠されるようにします。

101
00:08:06,870 --> 00:08:12,190
だから私たちは近づいていますが、私たちは垂直方向と水平方向にもっと多くのスペースを取る必要があります。

102
00:08:12,390 --> 00:08:20,360
そこで私は40ピクセルを加算して、最終的にはゼロに設定し、ブロック2の表示を2に設定します。

103
00:08:20,510 --> 00:08:21,990
 

104
00:08:22,440 --> 00:08:23,950
そして私は今リフレッシュします。

105
00:08:24,870 --> 00:08:26,790
それはちょうどいいようです。

106
00:08:26,790 --> 00:08:29,460
したがって、次にアニメーションを行うことです。

107
00:08:29,760 --> 00:08:33,630
そしてそれがうまくいく方法は、実際には幅をゼロに設定することです。

108
00:08:33,780 --> 00:08:40,410
だから、私が味方に乗るまで、これらのスパンはすべて0になってから、それを40倍に増やします。

109
00:08:40,410 --> 00:08:42,420
 

110
00:08:42,870 --> 00:08:44,580
それでは、今やってみましょう。

111
00:08:45,020 --> 00:08:53,370
私はゼロを設定し、その後、味方だけではなく味方にマウスを乗せたときに、味方の上にマウスを置いたときに、味方している仲間の範囲を選択したいと考えています。

112
00:08:53,370 --> 00:08:54,810
 

113
00:08:57,930 --> 00:09:02,480
 

114
00:09:02,790 --> 00:09:08,020
そして、それと同じように40ピクセルになるように設定します。

115
00:09:08,070 --> 00:09:11,310
そして、私たち自身のバージョンに戻ってリフレッシュしましょう。

116
00:09:11,670 --> 00:09:13,920
スパンがなくなったことがわかります。

117
00:09:14,310 --> 00:09:19,330
私が上に乗って飛ぶと、そのスパンが現れ、ボタンが機能します。

118
00:09:19,800 --> 00:09:25,470
次の機能では、アニメーション化して瞬時に表示されるのではなく、トランジションプロパティを使用するだけです。

119
00:09:25,800 --> 00:09:27,860
 

120
00:09:28,170 --> 00:09:38,340
それで、スパンでは、遷移のゼロ点を2秒追加し、一定の速度で移動することを意味するイージングを単にリニアにします。

121
00:09:38,340 --> 00:09:43,680
 

122
00:09:43,680 --> 00:09:44,520
そしてそこに行く。

123
00:09:44,520 --> 00:09:46,680
私たちは素晴らしいアニメーションを持っています。

124
00:09:47,250 --> 00:09:54,420
アイコンが幅がゼロピクセルのときでさえまだアイコンが表示されていることを邪魔する小さなアイテムが1つあります。

125
00:09:54,420 --> 00:09:56,110
 

126
00:09:56,340 --> 00:09:59,970
だから見るのは本当に難しいですが、ここでアイコンを見てください。

127
00:09:59,970 --> 00:10:03,230
私がそれに乗っていなくても、まだそこにある。

128
00:10:03,240 --> 00:10:11,040
だから、私たちがやることは、スパンの不透明度をゼロに設定し、それをホバーするときに1に設定することだけです。

129
00:10:11,370 --> 00:10:17,580
したがって、不透明度は0、次に不透明度は1です。 0にする。

130
00:10:18,420 --> 00:10:19,840
そしてそれはそれを処理する必要があります。

131
00:10:19,860 --> 00:10:22,370
今はアイコンが見えません。

132
00:10:22,500 --> 00:10:28,680
それがあり、それが消えて、移行プロパティがすべてに影響を与えているので、それも消えます。

133
00:10:28,950 --> 00:10:29,790
 

134
00:10:30,120 --> 00:10:34,740
だから2にしましょう。 2秒後に私はあなたを見せます。

135
00:10:35,640 --> 00:10:40,810
フェードインしてからフェードアウトする方法に注目してください。

136
00:10:40,890 --> 00:10:42,560
だから、それは非常に遅いバージョンです。

137
00:10:43,200 --> 00:10:46,830
そして、我々は0を行うだけです。 2。

138
00:10:47,070 --> 00:10:53,250
 

139
00:10:53,250 --> 00:10:59,530
私たちが残した1つの小さな迷惑なことがあります。あなたがここで本当によく見るか、サイズを大きくすると、入力とこのリストの間に小さなギャップがあります。

140
00:11:00,060 --> 00:11:03,810
しかし、私は今そこに集中するときにギャップがなくなる。

141
00:11:04,200 --> 00:11:07,220
そして、私が集中していないとき、それは戻ってくる。

142
00:11:07,500 --> 00:11:13,450
だから、私たちは目に見えない小さな境界線を追加するつもりであることを修正するために、実際にはRのちょうど小さな境界線を持つことになります。

143
00:11:13,530 --> 00:11:23,340
G. 0 0 0 0

144
00:11:23,340 --> 00:11:24,690
0 0私たちが焦点を当てているときに私たちの国境と同じ空間を占めるにすぎません。

145
00:11:25,080 --> 00:11:34,560
だから私たちはここに戻り、3ピクセルのソリッドR-Gaの境界線を与えます。

146
00:11:35,150 --> 00:11:38,640
ゼロゼロゼロゼロ。

147
00:11:39,210 --> 00:11:41,770
だからそれは私たちに目に見えない境界を与えてしまうでしょう。

148
00:11:41,880 --> 00:11:47,420
しかしここに気づくと、少しばかりの隙間がなくなるように今更新するつもりです。

149
00:11:47,850 --> 00:11:53,580
だから今焦点が当てられたときに国境が平らであるだけでなく、実際には見えないほどに境界線がある

150
00:11:53,580 --> 00:11:56,000