CSS頁面載入動畫可以為網站增加動態及優美的特效，提高頁面的交互性和用戶體驗。通過CSS3新特性及JS的運用，可以實現各式各樣的頁面載入動畫，比如旋轉、展開、漸變等等。下面就讓我們一起來學習如何實現這些動畫效果。

//旋轉動畫
 .rotate {
animation: spin 2s infinite;
 }
 @keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
 }
//展開動畫
 .expand {
height: 0;
overflow: hidden;
animation: expand 0.5s forwards;
 }
 @keyframes expand {
0% {
height: 0;
}
100% {
height: 200px;
}
 }
//漸變動畫
 .fade {
opacity: 0;
animation: fadein 2s ease-in-out forwards;
 }
 @keyframes fadein {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
 }

以上三種動畫效果僅是眾多CSS頁面載入動畫的一小部分，實現它們的方法可以相互參照，而具體效果可因需求而不同。優秀的頁面載入動畫，能夠讓用戶在頁面載入期間感受到流暢、細膩的視效和操作感受，讓網站變得更加生動活潑。