# CSS動畫基礎與滑鼠互動

此部分分為基礎結構、hover互動、Active效果，分解一下這個動畫的幾個步驟:
1. 滑鼠移到背景，人物會出現陰影並且朝右，且出現文字「Where is my cake?」
2. 滑鼠移到人身上的時候，陰影會朝左，且眼睛會往右看，臉慢慢脹紅，且出現文字「i don't know, Don't look at me」
3. 點擊背景，頭髮會往下移動，且出現文字「Did you see it?」

scss的部分 為了方便管理，會先把人物的結構獨立出來，漸變與動畫的部分也是分開寫在不同地方，分開管理。

### 人物結構的重點:
- 把會重複利用的部分作成mixin，例如:寬高的設定、圓角
- 頭髮的部分利用內陰影製作

### Hover動畫重點:
- 人物基礎結構、漸變的時間、Hover、active後的效果分開寫，不要混在一起，可以更方便管理
- 兩層Hover，人物的Hover效果，要寫在場景的Hover下
- 注意人物的Hover後雖然陰影位置改變，但是還是要把原本人物的臉的陰影保留。

[codepen範例](https://codepen.io/abbyd0208/pen/WNoXLrx)

###### tags: `css` ,`滑鼠互動`