CSS自由落體動畫效果是一種常見的網站動畫效果，能夠增加網站的趣味性和用戶體驗。本文將介紹如何使用CSS實現自由落體動畫效果。

.ball {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: #ff6b6b;
animation: fall 1s ease-in-out infinite;
}
@keyframes fall {
0% {
top: 0;
}
100% {
top: 90%;
}
}

以上代碼是實現自由落體動畫效果的核心部分，我們通過設置CSS屬性來制作一個小球，并通過使用CSS3動畫屬性來使其自由落體。

首先，我們設置小球的初始位置在頁面頂部，并使用絕對定位將其放置在中間。接著，我們使用transform屬性和translateX函數來將小球橫向居中。為了讓小球呈圓形，我們設置了border-radius屬性，并定義了一個背景顏色。

然后，我們使用animation屬性來設置動畫，它有四個子屬性：animation-name、animation-duration、animation-timing-function和animation-iteration-count。在本例中，我們設置了animation-name為fall，即自由落體動畫；animation-duration為1s，即動畫時長為1秒；animation-timing-function為ease-in-out，即動畫效果為緩入緩出；animation-iteration-count為infinite，即動畫循環無限次。

最后，我們使用@keyframes關鍵字定義自由落體動畫的幀動畫。在幀動畫中，我們設置小球的初始位置為0%的top，并在100%的時候設置小球的位置為90%的top，即小球自由落體并掉落到頁面的底部。

總結來說，通過以上的CSS代碼，我們可以輕松實現自由落體動畫效果，增加網站的趣味性和用戶體驗。