CSS是一門(mén)非常重要的前端技術(shù)，它幫助我們實(shí)現(xiàn)了網(wǎng)站的美觀和可讀性。

其中，針對(duì)CSS的動(dòng)畫(huà)效果，讓網(wǎng)站看起來(lái)更加生動(dòng)有活力。

今天我們要講的是如何實(shí)現(xiàn)CSS圓球橫向擴(kuò)展動(dòng)畫(huà)。

.ball {
width: 60px;
height: 60px;
background-color: #f00;
border-radius: 50%;
animation: expand 1s infinite;
animation-timing-function: ease-in-out;
}
@keyframes expand {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}

首先，我們定義一個(gè)名為ball的CSS類(lèi)，這個(gè)類(lèi)用來(lái)定義圓球相關(guān)的樣式。

這里設(shè)置了圓球的寬度為60像素，高度為60像素，背景顏色為紅色，同時(shí)，圓球的邊緣設(shè)置為50%的圓形。

接下來(lái)，我們使用CSS中的動(dòng)畫(huà)技術(shù)，定義了一個(gè)名為expand的關(guān)鍵幀動(dòng)畫(huà)。

這個(gè)動(dòng)畫(huà)的關(guān)鍵幀包括了0%、50%、100%三個(gè)狀態(tài)。

在0%的狀態(tài)下，圓球的大小為初始大小，即scale(1)。

在50%的狀態(tài)下，圓球的大小會(huì)稍微增大，變?yōu)榱藄cale(1.5)。

最后，在100%的狀態(tài)下，圓球又恢復(fù)到了初始大小，即scale(1)。

我們將這個(gè)動(dòng)畫(huà)綁定到ball這個(gè)CSS類(lèi)上，通過(guò)設(shè)置animation屬性，讓圓球進(jìn)行無(wú)限循環(huán)的擴(kuò)展/收縮的動(dòng)畫(huà)。

通過(guò)這種方式，我們可以輕松實(shí)現(xiàn)一個(gè)美觀、生動(dòng)的圓球橫向擴(kuò)展動(dòng)畫(huà)，讓網(wǎng)站更具活力。