CSS實現預加載動畫是一種非常流行的技術，它可以為用戶提供更好的用戶體驗。通過使用CSS，我們可以很容易地創建一個簡單但有效的預加載動畫。

.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 9999;
}
.preloader::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: #333333;
animation: spin .8s ease-in-out infinite;
-webkit-animation: spin .8s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}

上面的代碼示例使用了CSS的偽元素和動畫功能。具體來說，我們在preloader中創建一個::after偽元素，來表示我們的預加載動畫。我們還定義了一個名為spin的動畫，以讓我們的動畫旋轉起來。

在實際的使用中，我們可以將這個預加載動畫添加到我們的網站或應用程序中，以便在頁面加載之前向用戶顯示一個動畫。一旦頁面被完全加載，我們可以使用JavaScript刪除preload元素并顯示出我們頁面的實際內容。

CSS實現預加載動畫是一種非常簡單但非常有效的技術，可以提升用戶體驗和網站的可用性。在實踐中，我們可以通過微調CSS屬性和動畫完成更多定制化的預加載動畫，以滿足各種需求和應用場景。