在網(wǎng)站開發(fā)中，下載按鈕是非常重要的一個(gè)元素，可以提升用戶體驗(yàn)和網(wǎng)站的交互性。而為了讓下載按鈕更加吸引眼球，我們可以使用CSS動(dòng)畫來為其添加更有趣的效果。

.button{
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:after {
content: " ";
background-image: url("download-icon.png");
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
vertical-align: middle;
}
.button:hover:after {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

在上述代碼中，我們首先定義了一個(gè)簡單的按鈕樣式，并在其后面添加了一個(gè)下載圖標(biāo)，這個(gè)圖標(biāo)通過:before偽元素添加到按鈕的文本后面，然后定義了一個(gè):hover偽類來控制下載圖標(biāo)的動(dòng)畫效果。

對(duì)于:hover偽類，我們定義了一個(gè)@-webkit-keyframes和@keyframes來分別實(shí)現(xiàn)在webkit內(nèi)核和其他瀏覽器中的動(dòng)畫變化。這個(gè)動(dòng)畫效果叫做旋轉(zhuǎn)動(dòng)畫，即當(dāng)按鈕被鼠標(biāo)滑過時(shí)，下載圖標(biāo)會(huì)無限旋轉(zhuǎn)。

通過添加這個(gè)簡單的CSS動(dòng)畫，我們就可以輕松地為我們的下載按鈕添加更加生動(dòng)和有趣的效果。