# 【Day12】前端基礎動畫互動 part1
## html attr與自定義屬性名稱
特色：不需要用class存取以呈現不同外觀變化

### 參考範例:按鈕
- 程式碼
- HTML(jade)

  div(data-size="small", data-color="red") 400
  div(data-size="medium", data-color="blue") 600
  div(data-size="large", data-color="green") 800

- CSS(sass)

  *
    background-color: white
    font-family: 微軟正黑體
    
  body,html
    background-color: #333
  
  @mixin size($w,$h)
    width: $w
    height: $h
  
  div
    border: solid 3px
    padding: 20px
    margin: 20px
    color: white
    background-color: transparent
    +size(150px,50px)
    &::before
      content: attr(data-size) "-"
    &::after
      content: "$"
  
  div[data-size="small"]
    +size(150px,50px)
  div[data-size="medium"]
    +size(250px,70px)
  div[data-size="large"]
    +size(350px,90px)
  
  div[data-color="red"]
    border-color: #cf1313
  div[data-color="blue"]
    border-color: #132fcf
  div[data-color="green"]
    border-color: #118f35
    

- 呈現
- 重點
1. 在HTML標籤小括弧中添加自定義屬性，並在CSS做調整
2. CSS特殊物件 - ::before 與 ::after
3. 透明背景 - background-color: transparent

## 綜合定位應用
### 參考範例：手機板個人主頁

- 程式碼
- HTML(jade)

  .phone
    .top
    .bottom
      .headpic
        .name Abby

- CSS(sass)

  *
    // border: solid 2px
    font-family: 微軟正黑體
    position: relative
  
  @mixin size($w,$h)
    width: $w
    height: $h
  
  body,html
    +size(100%,100%)
    padding: 0px
    margin: 0px
    background-color: #eee
  
  .phone
    width: 240px
    margin-left: auto
    margin-right: auto
    margin-top: 150px
    border: solid 1px #888
    border-radius: 5px
  
  .top
    +size(100%,150px)
    background-image: url("https://i.pinimg.com/originals/01/18/1d/01181dea324541d035d37f911bde10cd.jpg")
    background-size: cover
    background-position: center center
  
  .bottom
    +size(100%,200px)
    background: white
  
  .headpic
    +size(80px,80px)
    position: absolute
    top: -50px
    left: 20px
    background-image: url("https://i.pinimg.com/474x/93/63/aa/9363aa26a73fdadc035ac218492a86eb.jpg")
    background-size: cover
    border: solid 2px white
  .name
    right: -95px
    top: 5px
    color: white
    font-weight: 900
    letter-spacing: 2px

- 呈現
- 重點
1. 讓div用absolute做絕對定位
2. 置中
1. 在網頁正中央
margin-left: auto; margin-right: auto
2. 背景置中
background-position: center(x軸) center(y軸)
3. 讓名字相對於頭貼離特定距離
4. 讓圖片大小剛好塞滿
background-size: cover
## CSS加入基礎滑鼠互動
### 參考範例1:區塊變化
- 程式碼
- HTML(jade)

  .block1
    .block2 
    .block3 

- CSS(sass)

  @mixin block($w:50px,$h:50px,$back:white,$bor:black)
    width: $w
    height: $h
    background-color: $back
    border: solid 2px $bor
  
  .block1
    +block(200px,200px)
  
  .block1:hover .block2
    background-color: red
  .block1:hover .block3
    background-color: blue
    width: 150px
  .block1:active
    background-color: black
  
  .block2, .block3
    +block(50px,50px)

- 呈現
1. 游標放於區塊外
2. 游標移至區塊內
3. 點擊時
- 重點
1. hover
用於調整游標移至某區域的樣子
2. active
用於調整滑鼠點擊某區域的樣子

### 參考範例2:漸變
- 程式碼
- HTML(jade)

  .cross
    .line1
    .line2

  .block
    h1 標題
    p 內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文

- CSS(sass)

  body
    background-color: #333
  .cross
    border: solid 2px
    width: 200px
    height: 200px
    position: relative
    background-color: #f2d43a
    transition-duration: 0.5s

    &:hover
      background-color: #c99418
    & .line1, & .line2
      width:  170px
    & .line1
      transform: translateX(-50%) translateY(-50%) rotate(45deg)
    & .line2
      transform: translateX(-50%) translateY(-50%) rotate(-45deg)

    & .line1, & .line2
      transition-duration: 0.5s
      width: 150px
      height: 10px
      background-color: white
      position: absolute
      top: 50%
      left: 50%

    & .line1
      transform: translateX(-50%) translateY(-200%)
    & .line2
      transform: translateX(-50%) translateY(200%)
  .block
    border: solid 2px white
    width: 400px
    height: 300px
    padding: 20px
    font-family: 微軟正黑體

    &:hover
    & h1, & p
     opacity: 1
     top: 0px
    & h1, & p
      position: relative
      opacity: 0
      top: 20px
      color: white
      transition-duration: 0.5s
    & p
      transition-delay: 0.5s

- 呈現
{%youtube qtlyajQIYik %}
- 重點
1. transition-duration代表變化時長
2. transition-delay代表出現延遲時間

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::