CSS是一門可以制作簡單比較文藝的動(dòng)畫的編程語言。今天，我們將學(xué)習(xí)如何使用CSS將矩形變成圓形并添加動(dòng)畫效果。

.circle {
border-radius: 50%;
}
.circle:hover {
transform: scale(1.3);
transition: all 0.3s ease-in-out;
}

如上所示，.circle類表示一個(gè)基本的矩形。通過設(shè)置border-radius屬性，該矩形將變成圓形，因?yàn)?0％的border-radius值。

但是，我們還想要一個(gè)動(dòng)畫效果。這就是為什么我們設(shè)置一個(gè):hover偽類。這意味著當(dāng)用戶將鼠標(biāo)懸停在圓形上時(shí)，將應(yīng)用transform屬性。該transform屬性使用scale函數(shù)將圓形的大小擴(kuò)大到1.3倍。動(dòng)畫過程會(huì)持續(xù)0.3秒，并使用ease-in-out功能，使動(dòng)畫看起來平滑而美觀。

現(xiàn)在，我們已經(jīng)學(xué)習(xí)了如何將矩形變成圓形并添加動(dòng)畫效果。您可以在自己的CSS中使用此代碼，并通過調(diào)整屬性來獲得針對您項(xiàng)目的完美圓形動(dòng)畫效果。CSS是一門非常有趣的編程語言，因?yàn)橹灰私饬巳绾问褂闷渲械膶傩裕涂梢灾谱鞒銎恋男Ч?/p>