1
00:00:00,210 --> 00:00:03,460
我們將處理接下來的事情，就是對身體的背景。

2
00:00:03,660 --> 00:00:09,270
這其實不是，雖然如果我們找到了一個看起來像這樣的會工作得很好的背景圖像。

3
00:00:09,420 --> 00:00:13,590
但是，但它實際上是說CSX是增加了對我的漸變。

4
00:00:13,650 --> 00:00:27,470
因此，在本質上，我們可以寫出線性漸變而非從頭開始編寫他們自己的，我要告訴你上有一些很好的預先做過色彩漸變一個很好的資源，我們可以與工作，我們可以更新和編輯我們擁有。

5
00:00:27,750 --> 00:00:29,850
所以，這就是所謂的梯度點com。

6
00:00:30,030 --> 00:00:35,580
然後有一堆不同的漸變我們可以使用箭頭鍵來看到其中的一些的。

7
00:00:36,180 --> 00:00:39,860
於是我就經歷過，直到我發現一個，我很喜歡。

8
00:00:40,050 --> 00:00:52,120
因此，讓我們說，我想用這一切，我們需要做的就是點擊Get綜援代碼或按下回車鍵，然後將此代碼複製到剪貼板，然後我們將選擇身體。

9
00:00:52,360 --> 00:00:56,960
所以，身體和粘貼英寸

10
00:00:57,540 --> 00:01:02,610
所以，它實際上只是一條線，但也有各種不同的瀏覽器前綴。

11
00:01:02,880 --> 00:01:09,130
因此，對於Internet Explorer中火狐Chrome瀏覽器Opera的所有這些不同的前綴。

12
00:01:09,240 --> 00:01:09,990
但是它做什麼。

13
00:01:10,020 --> 00:01:18,740
我們正在制定的背景，線性漸變，我們正在挑選兩種顏色和這些顏色不同的百分比和也的角度。

14
00:01:18,750 --> 00:01:24,390
因此，讓我告訴你它是什麼樣子，現在如果我們刷新我們的。

15
00:01:24,390 --> 00:01:26,190
我們有這個漂亮的漸變。

16
00:01:26,580 --> 00:01:28,420
因此，我們可以繼續玩了那裡。

17
00:01:28,620 --> 00:01:31,890
您可以檢查出一些更多和隨意使用你自己的。

18
00:01:31,980 --> 00:01:35,860
我決定對一個在這裡被稱為波拉波拉。

19
00:01:36,210 --> 00:01:42,840
所以我們就複製複製到剪貼板並替換此代碼。

20
00:01:42,840 --> 00:01:52,870
所有這一切都在這裡與新的梯度而這又是另一種線性漸變，別人寫了兩種顏色各不同的百分比。

21
00:01:53,150 --> 00:01:54,450
我們會保存。

22
00:01:54,780 --> 00:01:56,250
和去看看現在。

23
00:01:56,520 --> 00:01:57,830
還有我們走。

24
00:01:57,840 --> 00:01:59,190
所以我們越來越近了。

25
00:01:59,430 --> 00:02:02,860
我們需要去努力的下一件大事是圖標。

26
00:02:03,060 --> 00:02:05,530
因此，我們有一個加號圖標出現。

27
00:02:05,640 --> 00:02:10,130
而這樣做是它顯示並隱藏窗體，然後我們有垃圾桶。

28
00:02:10,130 --> 00:02:16,100
我可以看到，我們還需要包括那些圖標是一個名為字體庫的一部分。

29
00:02:16,110 --> 00:02:16,780
真棒。

30
00:02:17,050 --> 00:02:22,650
所以去字體真棒，只是谷歌的網站是豐泰真棒。

31
00:02:22,660 --> 00:02:24,030
我讓她一

32
00:02:24,930 --> 00:02:29,660
和所有它是一堆圖標的集合。

33
00:02:29,970 --> 00:02:39,720
因此，讓我告訴你，如果我們看一下下的圖標有一個巨大的所有不同的圖標，我們可以使用，所以你可以看到列表中。

34
00:02:40,380 --> 00:02:52,740
因此，我們需要包括我們的應用程序內的這個庫，所以我們可以去下載它的權利那裡點擊下載或者我們也可以做一個字體。

35
00:02:52,740 --> 00:02:57,370
真棒CDN，只是使用這些CDN之一，也是。

36
00:02:57,450 --> 00:02:58,710
任何一個會工作。

37
00:02:59,100 --> 00:03:06,800
因此，對於各種緣故，因為他們已經下載了周杰倫的查詢，我將用光盤並在這裡複製鏈接。

38
00:03:07,470 --> 00:03:30,940
然後我會去我的索引頁蒂莫，我需要添加一個鏈接標籤，因為它是綜援文件，因此它實際上不是一個JavaScript文件或字體，但它是一個C SS文件，我可以節省什麼，做它是實際上給了我一堆是預先建立和預做，我可以再添加元素，所以我會告訴你一些例子類。

39
00:03:31,230 --> 00:03:51,350
如果你想用說的空電池或電池四分之三所有我們需要知道的是，該類稱為F A破折號電池破折號3破折號courters所以我們需要添加一個剛才複製的代碼在這裡的某個地方到我們的應用程序。

40
00:03:51,510 --> 00:03:53,400
讓我們把它放在H-1。

41
00:03:53,400 --> 00:03:59,060
這是一個眼睛標籤，它代表的圖標，我們給它一個類，我們不必把任何東西在這裡。

42
00:03:59,070 --> 00:04:02,560
我們離開那個空的，這表示瑞凡真棒。

43
00:04:02,700 --> 00:04:13,500
然後，這是圖標的名稱，將節省刷新和我們現在有電池圖標，而不是三季度電池圖標。

44
00:04:13,500 --> 00:04:28,070
我們希望加號和垃圾桶，所以我們會在這裡走了過來，並在H-1內將保持圖標並保持F A類，但我們希望F.A.破折號加號和隨意使用自己的圖標。

45
00:04:28,110 --> 00:04:49,990
如果你去尋找真棒，你會發現另外一個你喜歡的，因為我們也可以使用像鉛筆尋找圖標或鉛筆和紙之一，如果我是新鮮的，現在有哪些走進風格和移動的加號在右邊，我們需要為要做的就是選擇它第一次讓我們選擇的狗。

46
00:04:50,280 --> 00:05:00,950
F A破折號加號和意志浮動權就這樣和刷新，它現在在正確的網站上。

47
00:05:00,960 --> 00:05:06,250
現在讓我們來解決這個垃圾桶，我們不是要處理的動畫，只是還沒有。

48
00:05:06,300 --> 00:05:09,810
我們只是要得到垃圾可以顯示一個X的根本上，而不是

49
00:05:10,260 --> 00:05:44,520
因此，讓我們回去我們spand我們究竟要擺脫X的和跨度裡面，我們要增加一個電子標籤和電子標籤將有一類FAA和名稱垃圾桶圖標FAA Dasch垃圾，讓我們複製到其他範圍的，這僅僅是對現有的時候使用頁面加載，但我們得到了新的3垃圾桶。

50
00:05:44,730 --> 00:05:46,280
我們仍然在對付前。

51
00:05:46,530 --> 00:05:50,310
那麼接下來，我們要在這裡去到我們的JavaScript。

52
00:05:50,310 --> 00:05:54,990
而當我們的筆新的，我們不希望用追加十跨度

53
00:05:55,290 --> 00:06:00,930
要附加一個圖標，我們需要確保我們的報價不干擾。

54
00:06:00,930 --> 00:06:08,690
因此，如果我們使用單引號那裡保存，現在我們應該有一個垃圾桶跨度內的圖標。

55
00:06:08,870 --> 00:06:10,830
因此，讓我們添加了一些新的問題。

56
00:06:10,830 --> 00:06:11,650
在那裡，我們走了。

57
00:06:12,030 --> 00:06:15,320
我仍然可以點擊，因為他們仍然跨度內。

58
00:06:15,450 --> 00:06:18,680
所以這是一個圖標元素，而不是一個跨度。

59
00:06:19,530 --> 00:06:22,440
所以我點擊事件仍然工作。

60
00:06:22,470 --> 00:06:30,210
現在，讓我們在這個簡單的動畫工作，這是所有用C做評估這裡的跨度實際上是隱藏在頁面加載時。

61
00:06:30,210 --> 00:06:31,630
他們有豐富的為零。

62
00:06:31,860 --> 00:06:40,950
然後當我將鼠標懸停我們實際上增加了寬度40像素，然後我們正在做它用的過渡性質的動畫。

63
00:06:41,430 --> 00:06:44,070
所以，讓我們嘗試一些的。

64
00:06:44,400 --> 00:07:06,270
打開我們的綜援文件，我們會做的第一件事就是風格跨度如此跨度，我們要給予他們一個背景顏色紅色這為e 7 4℃3℃，將刷新。

65
00:07:06,460 --> 00:07:10,820
現在我們周圍的紅色背景。

66
00:07:10,830 --> 00:07:22,680
我們要做的下一件事就是給他們的40個像素這似乎並沒有做太多尚未但是一旦我們一些更多的屬性添加，你會發現有不同的高度。

67
00:07:23,250 --> 00:07:29,140
讓我們保證金增加20像素的權利並返回。

68
00:07:29,200 --> 00:07:34,420
現在，讓我們，我們在這裡想要的空間。

69
00:07:35,550 --> 00:07:45,700
接下來，讓我們給他們的文字居中對齊這僅僅是在這裡的跨度非常細微的差別。

70
00:07:45,990 --> 00:07:55,110
裡面一個重要的圖標是使圖標過於白皙所以白色。

71
00:07:55,110 --> 00:07:55,970
好吧。

72
00:07:56,220 --> 00:08:02,640
所以我要告訴你如何讓他們看起來像這首沒有動畫，讓他們總是在那裡。

73
00:08:02,930 --> 00:08:06,830
然後我們會得到他們的動畫，使它們隱藏，直到我們徘徊。

74
00:08:06,870 --> 00:08:12,190
因此，我們正在接近，但我們需要這些垂直和水平佔用更多的空間。

75
00:08:12,390 --> 00:08:21,990
所以，我要在一個有40個像素，最終我們要設置為零，在行塊設置顯示兩個附加。

76
00:08:22,440 --> 00:08:23,950
我現在刷新。

77
00:08:24,870 --> 00:08:26,790
而這看起來恰到好處。

78
00:08:26,790 --> 00:08:29,460
所以，接下來的事情就是做動畫。

79
00:08:29,760 --> 00:08:33,630
這是工作的方式我們實際上要設置寬度為零。

80
00:08:33,780 --> 00:08:42,420
所以，所有這些跨度有一個零，直到我將鼠標懸停在一個盟友，然後我們增加與為40的跨度。

81
00:08:42,870 --> 00:08:44,580
因此，讓我們做這件事情。

82
00:08:45,020 --> 00:09:02,480
我要設定為零，那麼當我們將鼠標懸停在一個盟友，而不僅僅是跨度，但是當我們將鼠標懸停在一個盟友，我們要選擇的就是這樣的正上空盤旋一個盟友內部的跨度。

83
00:09:02,790 --> 00:09:08,020
然後，我們將設定為40個像素就這樣。

84
00:09:08,070 --> 00:09:11,310
讓我們回到我們自己的版本，並刷新。

85
00:09:11,670 --> 00:09:13,920
你可以看到，跨度現在都沒有了。

86
00:09:14,310 --> 00:09:19,330
當我將鼠標懸停在飛跨度出現，按鈕的作品。

87
00:09:19,800 --> 00:09:27,860
所以接下來的功能得到它的動畫，使得它不只是瞬間呈現要做到這一點，我們將只使用過渡性質。

88
00:09:28,170 --> 00:09:43,680
因此，對跨度，我們要添加轉場零點兩秒鐘，我們會做到線性剛剛提到這意味著它將以恆定速度移動的寬鬆政策。

89
00:09:43,680 --> 00:09:44,520
還有我們走。

90
00:09:44,520 --> 00:09:46,680
我們有漂亮的動畫。

91
00:09:47,250 --> 00:09:56,110
目前，它在這裡打擾我這是該圖標仍然顯示，即使跨度為零像素寬一個小小的項目。

92
00:09:56,340 --> 00:09:59,970
所以，這真的很難看到，但在這裡觀看的圖標。

93
00:09:59,970 --> 00:10:03,230
它仍然存在，即使我沒有盤旋在它。

94
00:10:03,240 --> 00:10:11,210
所以，我們要做的僅僅是設置不透明度上跨度為零，然後將其設置為一個，當我們徘徊。

95
00:10:11,370 --> 00:10:17,580
所以，不透明度為零，然後不透明度，當我們徘徊1.0。

96
00:10:18,420 --> 00:10:19,840
這應該照顧它。

97
00:10:19,860 --> 00:10:22,370
所以現在我們不能看到的圖標。

98
00:10:22,500 --> 00:10:29,790
在那裡，它是，然後消失，它淡出，以及因為過渡性質是影響一切。

99
00:10:30,120 --> 00:10:34,740
因此，讓我們把它2.2秒，我會告訴你的。

100
00:10:35,640 --> 00:10:40,810
注意它是如何淡入然後淡出。

101
00:10:40,890 --> 00:10:42,560
所以這是一個非常緩慢的版本。

102
00:10:43,200 --> 00:10:46,830
而我們只是做0.2。

103
00:10:47,070 --> 00:10:59,530
還有，我們已經離開了這是，如果你看起來很密切在這裡或增加的大小還有就是輸入，然後這個列表中的UL差距很小一個小小的惱人的事情。

104
00:11:00,060 --> 00:11:03,810
但是差距消失，當我現在集中出現紅暈。

105
00:11:04,200 --> 00:11:07,220
然後當我不關注它回來。

106
00:11:07,500 --> 00:11:24,690
因此，要解決這個問題，我們要添加一個邊陲那是看不見的實際這將有一台彩色R.G.只是一個邊陲0 0 0 0 0 0，我們就採取了相同的空間，當我們關注我們的邊界一樣。

107
00:11:25,080 --> 00:11:34,560
因此，我們將回去喜歡哪我們這裡有，並給它三個像素堅實的R-嘎的邊界輸入。

108
00:11:35,150 --> 00:11:38,640
0 0 0 0。

109
00:11:39,210 --> 00:11:41,770
所以這將最終給我們一個無形的邊界。

110
00:11:41,880 --> 00:11:47,420
不過，這裡的通知，我會馬上刷新一點差距消失。