CSS是一種用于為HTML文檔添加樣式和布局的樣式表語言。它可以幫助我們在加載頁面時添加各種特效，使網站內容更加豐富和引人注目。以下是一些關于如何在加載頁面時使用CSS添加特效的示例：

/*代碼示例1: 圖片加載效果*/
img {
opacity: 0; /*圖片透明度為0*/
transition: opacity 1s; /*透明度漸變效果為1秒*/
}
img.loaded {
opacity: 1; /*圖片透明度為1*/
}
/*使用JavaScript，當圖片加載完畢時，將 "loaded"類添加到image元素上*/
var img = document.querySelector('img');
img.onload = function() {
img.classList.add('loaded');
};

上述示例代碼介紹了如何為圖片添加加載效果。翻譯成人話就是，一開始圖片時透明的，然后當圖片加載完畢后，透明度變成1。通過CSS的transition屬性可以實現過渡效果，也就是將透明度從0到1漸變。在這個效果中，我們使用了JavaScript來檢測圖片是否已經加載完畢，然后將"loaded”類添加到圖片元素上。這樣CSS中的 ".loaded"規(guī)則就會應用到這個圖片上，使它變得不透明。

/*代碼示例2: 滾動漸變效果*/
header {
background: #333;
transition: background 0.5s;
}
/*.scrollTop屬性是當前滾動的距離，當它大于Navbar高度時，將Navbar的背景色從透明到黑色漸變。*/
window.onscroll = function() {
var nav = document.querySelector('header');
if (window.pageYOffset >nav.offsetHeight) {
nav.style.background = "#000";
} else {
nav.style.background = "transparent";
}
};

上述代碼示例展示了如何為導航欄添加滾動漸變效果。當用戶拖動滾動條時，會檢查當前的滾動距離。如果滾動距離大于導航欄的高度，則將導航欄的背景色逐漸從透明變成黑色。為此CSS中的 transition屬性也將導致過渡效果。同時，上述代碼中的JavaScript代碼使用了window對象的onscroll方法來相應滾動事件，并使用pageYOffset屬性獲取當前滾動距離。當這個距離大于頭部導航欄的高度時，就會將導航欄的背景色逐漸變成黑色，完成漸變效果。

總之, 我們可以使用對CSS和JavaScript的基礎知識去制作許多令人驚嘆的頁面效果。熟悉CSS和JavaScript的基礎知識后, 大家可以深入掌握力量, 去制作許多更加酷炫的頁面效果。