# 動畫互動網頁特效入門（JS/CANVAS）第一、二章
###### tags: `HAHOW` `Javascript` `Canvas`

## 8.HTML/CSS快速入門 - css的定位與排列
若元素定位為float，可在父元素CSS設定 overflow: hidden ，將超出的元素撐滿。

---

## 14.HTML/CSS快速入門 - sass 迴圈與內容
### 1. 模組化：
* 顏色
* 大小
* 旋轉

---

### 2. SASS @for迴圈

@for $i from 1 through 50
產生 1~50 變數 $i

接著在div名稱後要加入順序的地方換上：

@for $i from 1 through 50
  .present#{$i}

#代表轉換大括號內的變數轉成文字後再加入div的名稱

@mixin present($size: 100px, $bodyColor: #ff5151, $ribbonColor: #fff, $rotateDeg: 0deg)
  
  width: $size
  height: $size
  position: relative
  background: $bodyColor
  box-shadow: 0 0 20px rgba(#000, 0.5)
  transform: rotate($rotateDeg)

$colorRed: #f24
$colorWhite: #fff
$colorBlue: #3364f7
$colorYellow: #ffd221
$colorPurple: #c747ff
$colors: ($colorRed, $colorWhite, $colorBlue, $colorYellow, $colorPurple)
// 產生隨機color的mixin
    
@for $i from 1 through 50 // 產生變數 $i = 1~50的迴圈
  $size: random(50)+50 // 隨機 1~50 後 再+50
  $bodyColor: nth($colors, random(5)) // 在$color變數裡隨機取5個值(變數)
  $rotateDeg: random(20)-10 // 隨機 1~20 後 再-10
  $ribbonColor: nth($colors, random(5)) // 在$color變數裡隨機取5個值(變數)
  @if ($ribbonColor == $bodyColor) // 如果 $ribbonColor變數值 = $bodyColor變數值
    $ribbonColor: nth($colors, random(5)) // 我就再重選顏色
  .present#{$i} // 再.present後面名稱加上 $i 迴圈1~50
    +present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)

---

## 15. CSS動畫基礎與滑鼠互動
### 1.

@mixin size($w, $h:$w) //當沒有給$h值時，$h就等於$w

### 2.
hover後會冒出來是因為transform不會影響到position:absolute，會將元素改成position:relative

### 3.

@mixin abc 可簡寫成 =abc

---

## 17. <Project 2> 在網頁寫一座美麗城市 Part1
1.

=abpos($l:initial,$t:initial)
  position: absolute
  left: $l
  top: $t
  
做初始化，不做任何設定

## 18. <Project 2> 在網頁寫一座美麗城市 Part2
1.

[class^="house"]
  position: absolute
針對class name開頭是house都套入設定

---