靜態網頁終究還是靜態網頁，但如果要裝得有模有樣，有一些技能還是可以用一用。

例如我第一次學到 hover 功能，就覺得 hover 過去有不一樣的樣式，感覺網頁真的有在跟你互動呢。

這樣的動作其實挺簡單的，但是我對於一般使用者能夠提升滿多的體驗。
例如今天有個 div 長這樣

滑鼠滑過去會長這樣

如果史努比的 div class ="name"
第一個 div 的 css 會寫成

.name{
    display: inline-block;
    border: #ffbc2e solid 1px;
    padding: 1.5%;
    padding-left:3%;
    padding-right:3%;
    margin-right: 3%;
}

.name:hover{
    background: #ffbc2e;
    color: white;
}

在 name 後面加上 hover 以及要改的樣式，就可以創作滑鼠滑過去的效果，成功騙過一堆人啦。

但是標題是 animate.css。雖然我覺得 hover 很棒了，不過如果適時加上一些動畫也會有很大的加分效果呢。
今天要介紹是很好用的 animate.css，首先只要在 html 裡加上這段

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

就可以自動引入 animate.css 囉。

這是 animate.css 的首頁，你可以在首頁先選擇你想要什麼樣的動畫，在引入上面那段網址後，在你想要有動畫的 div class 上加入類似以下的

<div class=" ＿＿＿ animated fadeIn"></div>```

（＿＿＿是原本 class 的名字）

這樣網頁就有動畫啦。外加一個，如果你想要動畫無限播放的話，
可以在 animates 前面加上 infinite，這樣就可以做出很惱人的無限播放動畫了 XD