# 動畫互動網頁特效入門 | 學習歷程筆記
### 第1章
### 第2章
#### 單元6 CSS定位與排列實作
* 標題背景漸層陰影設定
> * 用linear-gradient製造陰影效果
> * 寬度設定100%，此寬度不包含padding跟border
> * 用border-box來把border以內的寬度包含進去

.top .name {
  background: linear-gradient(transparent 0%, black 100%);
  width: 100%;
  box-sizing: border-box;
  padding-top: 30px;
  padding-bottom: 15px;
}

* [CollorZilla](https://www.colorzilla.com/)(可以隨意吸取顏色的工具)

#### 單元7 flexbox排版入門
* justify(主軸線)、align(副軸線)會根據現在box的排列方向而定義
> ex.如果box的排列方向是水平排列，那此時的justify(主軸線)就會是水平線，align(副軸線)就是垂直的
* 用flex設定數值來決定比例
* .flexrow>div，用">"指定下一層的div，如果是空格則表示裡面所有的div
* flex-grow: 0 控制最大值在指定數值，不會因為螢幕加大而隨意增加
* emmet語法: 大括號中放"$"，tab展開就有編號了

.item*3{$}  按tab鍵展開
 --> .item 1
     .item 2
     .item 3

#### 單元8 撰寫一份自己的網頁履歷
* 選取換行 清單排左邊，選取尾端，按ctrl+D
* CSS初步調整: 把版面放到正確的位置，並且給它適合的內距
* 用flex設定數值來決定版面左右的比例
* 複寫區寫在body下面，把原本的樣式重新定義
* 用nth-child(數字)選取特定項目，ex.針對ul下的某li寫css時可用，就不用另外再寫class了

#### 單元11 sass迴圈與內容
* sass裡rgba可以直接給顏色，不一定要用數字ex.rgba(black,0)
* sass編號在物件後面加"$字號，ex.present$*50 就會從1到50號編號
* 用#{ } 把變數轉成字串 ex.present#{$i} 就會代換成i跑過的數字
* $color裡面陣列用小括號()

#### 單元12 CSS動畫基礎與滑鼠互動
* 重複樣式的話可以用@mixin, 另外mixin也可以再加一個mixin

@mixin hair($w,$h)
+bdrsrect($w,$h)  //原本就已經寫好的

* sass 裡的margin-left:可寫成 margin: left:

margin: 
  left: 50px
  top: 40px

* box-shadow: inset 可以讓陰影在物件內部
* h1有預設的外距，不想要預設值時可自訂margin:0
* 可以單獨設定某屬性的transition秒數，用逗點隔開，在寫屬性

.body
  transition: 0.5s, background-color 0.4s 0.1s
  //單獨設定background-color，注意後面不用冒號

#### 單元13 CSS製作影格動畫
* animation-iteration-count 動畫執行次數
* animation-direction 動畫執行方向 alternate: 來回執行
* @mixin 也可以寫成等於"="

#### 單元14 在網頁寫一座美麗城市 Part1 - 前置準備
* 白天夜晚的切換，將漸層背景的高度設定超過100%，才透過position控制顯現的部分
* 前置準備:
1. 設定顏色變數
2. 設定字體
3. 設定常用mixin - 大小圓角、置中、絕對定位
4. 設定input(type="checkbox")
* 把input包在lebel裡面，不管點擊label哪裡都可以被勾選起來
* input:checked+oooo, 用加號選擇勾選起來後要變動的東西

input:checked+h3
*   color: red  //input被勾起來後，h3會變紅色

#### 單元15 在網頁寫一座美麗城市 Part2
* [class^='house'] class開頭名稱一樣去做設定ex.house1、house2、house3
* "*" 米字號選取的不包括偽元素，要另外再寫

*,*:before,*:after
  border: 2px solid black

* 偽元素的background-color用inherit 直接繼承外部顏色
* 漸層適用background，不適用background-color

#### 單16 在網頁寫一座美麗城市 Part3
* 動畫秒數用負的就可以提早開始，中間不會有停滯時間，動畫比較流暢

### 第3章
#### 單元4 陣列操作與迴圈
* console.clear() 重新整理的時候
> * 課後練習: 將0-100轉成五顆星(0-5)

#### 單元5 字串的處理
* Regex Match 正規表達式 (測試網站:regex 101)
* 分割 .spilt("用甚麼分割") ex.bookdata.spilt(";") 代表用分號分割bookdata裡面的東西
* parseInt 把字串轉為數字
* .slice() 切割 (切在前面)
* .replace("原本的東西","要取代的東西")，但是只會取代第一個
* 正規表達式: /人/g 所有"人"都會被選起來
* 正規表達式: /(人)/g $1代表第一個( )
* 正規表達式: (.?*) 所有符合的任意東西
* 正規表達式: \n 換行
* 正規表達式: 遇到特殊字元用反斜線\ ex. /<><\/>/
* .trim() 去掉前後的空白
* ex6 用` ` 榮許多行字串的存在

#### 單元6 函數模組化應用
* 函數function 裡面的變數var只會在函數裡面作用，外面抓不到
* 函數要把結果用return

#### 單元7 時間函數-從靜態到動態
* setTimeout(函數,毫秒)
* 把函數寫在setTimeout裡面，函數作為引數用不加"()"
* clearTimeout()/claerInterval() 可用來取消setTimeout/setInterval()
* RequestAnimationFrame: setTimeout+系統優化觸發時間
* 可以把沒有名字的function放在setTimeout裡面
* 定義完function不會自動執行，要手動再定義一次
* 長寬用%定義的話，若是母元素更動的話，也會跟著跟動，就不用一個個改了
* animation : alternate 雙向動畫

#### 單元8 Jquery 操作元素
* 選擇 ul li(空一格代表裡面的東西)/ div>a用">"(代表直屬的東西)
* 選擇 .title.small(沒空格代表都要) .title .small(有空格代表選tall裡面的small)
* odd(奇數) even(偶數)
* 週期性選擇 nth-child(7n+3) 每7格的第三個
* $("img:first") 選第一張圖 $("img:last") 選最後一張圖
* .hide(duration,complete) 可以隱藏東西
*