在CSS中，我們可以通過動畫效果實現小球自由落體的動畫效果。下面是實現該效果的CSS代碼：

.ball{
position: absolute;
top: 0;
left: 100px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
animation: fall 2s ease-in-out forwards;
}
@keyframes fall{
from{
top: 0;
}
to{
top: 400px;
}
}

上述代碼中，我們使用了CSS動畫的屬性和關鍵幀來實現小球自由落體的效果。首先，我們在樣式表中定義了一個.ball類，它的position屬性設為absolute，即絕對定位在頁面中的位置，top和left屬性分別設為小球初始位置的上下左右偏移量，width和height屬性設為小球的寬高，邊框半徑設為50%,即圓形，背景顏色為紅色。

接下來，我們定義了一個名為fall的動畫，其中from和to關鍵幀分別表示小球動畫效果的起始和終止狀態。初始狀態下，小球位于頁面頂部，即top: 0；而結束狀態下，小球位于400像素位置上，即top: 400px。容易看出，該動畫效果實現了小球自由落體的視覺效果。

最后，我們通過animation屬性指定了.ball類使用名為fall的動畫，并添加了一個forwards屬性，表示動畫結束后應該保持當前狀態，即小球保持落下的最終位置不動。

綜上，通過CSS的動畫效果實現小球自由落體的方法是非常簡單實用的。借助CSS動畫的優勢，我們可以輕松創建出各種炫酷的頁面效果。