CSS小球碰撞是一種基于CSS3動畫和JavaScript實現的交互動畫效果。該效果可以讓小球在網頁上運動并碰撞，切換運動方向，展現更加生動的頁面交互。

.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
animation: move 2s linear infinite;
}
@keyframes move{
from{ left: 0; top: 0;}
to{ left: 200px; top: 200px;}
}

以上代碼為小球的樣式和基礎運動方式，通過CSS3動畫實現小球在頁面上的移動，運動的方向為從左上角到右下角。

var ball=document.getElementById("ball");
var x=1,y=1;
setInterval(function(){
var left=parseInt(ball.style.left)+x;
var top=parseInt(ball.style.top)+y;
if(left<0||left>document.documentElement.clientWidth-ball.offsetWidth){
x=-x;
} 
if(top<0||top>document.documentElement.clientHeight-ball.offsetHeight){
y=-y;
}
ball.style.left=left+"px";
ball.style.top=top+"px";
},30);

以上代碼為小球運動的JavaScript邏輯實現，通過計算小球的運動距離，判斷小球是否碰撞到頁面邊緣。如果碰撞到邊緣，需要切換小球的運動方向，從而實現小球的碰撞效果。

通過結合CSS3動畫和JavaScript動態計算，可以實現小球碰撞效果，讓頁面交互更加生動有趣。