今天我們將要學習如何在網頁上做出帥帥的動畫效果，雖然現存許多可以幫助我們製作網頁動畫的工具，但為了能夠完全了解其底層的邏輯以及能更靈活地控制動畫的效果，我們將帶著同學自己手刻出網頁動畫！
今天要製作的網頁動畫效果是：
像打字機般的視覺效果，模擬打字、刪字時的游標，可以用來顯示個人 sloagan。
一串 components 頭尾相接、循環播放，常用以展示個人興趣或 tech stack 。
我們可以使用 CSS Selector 來選取一個或一些元素，但若想要進一步去選取這些元素的某種狀態或是**某個部分，**就需要使用到下面介紹的 Psuedo-Class 以及 Psuedo-Element。
CSS Psuedo-Class 是附加在選擇器（selector）後的一個關鍵字，它讓你能夠針對被選取元素的特定狀態來設定樣式。
| Psuedo-Class | 說明 |
|---|---|
:hover |
滑鼠移到元素上時 |
:active |
使用者點擊元素（按下滑鼠但還沒放開）時 |
:focus |
元素被聚焦（例如輸入框被點選）時 |
:visited |
使用者已拜訪過的連結 |
:link |
尚未拜訪的連結 |
button:hover {
color: blue;
}