CSS3小球效果是一種很受歡迎的動(dòng)畫效果，可以讓網(wǎng)頁(yè)設(shè)計(jì)更加豐富和生動(dòng)。小球可以在頁(yè)面上來(lái)回彈動(dòng)，具有很好的視覺效果，為網(wǎng)頁(yè)增添了一絲趣味。

.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 200px;
left: 50px;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
transform: translate(0,0);
}
50% {
transform: translate(0,-50px);
}
100% {
transform: translate(0,0);
}
}

上面的代碼就是一個(gè)簡(jiǎn)單的CSS3小球動(dòng)畫，其中主要涉及到兩個(gè)CSS屬性：animation和keyframes。通過(guò)animation，我們指定動(dòng)畫名稱、動(dòng)畫持續(xù)時(shí)間和循環(huán)次數(shù)。而通過(guò)keyframes，我們定義了動(dòng)畫細(xì)節(jié)，這里設(shè)置小球在50%的時(shí)間內(nèi)向上彈跳。

為了設(shè)置小球的形狀，我們使用了border-radius，將小球的四個(gè)角都設(shè)置為50%的弧度，這樣就得到了一個(gè)圓形。為了讓小球能夠在頁(yè)面上移動(dòng)，我們使用了position屬性，將小球的位置設(shè)置為絕對(duì)定位，并通過(guò)top和left屬性設(shè)置了其初始位置。最后通過(guò)translate屬性設(shè)置小球的位移即可完成動(dòng)畫效果。

總而言之，CSS3小球是一種簡(jiǎn)單又實(shí)用的動(dòng)畫效果，可以讓頁(yè)面更加生動(dòng)，吸引用戶的眼球。如果你正在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，不妨嘗試一下使用CSS3小球，讓你的頁(yè)面更加精彩。