在網頁設計中，CSS的應用越來越廣泛，可以輕松實現各種吸睛的效果。其中，鼠標滾動頁面動畫是一個最受歡迎的特效之一，可以在頁面中為用戶呈現動態的效果，進一步增加用戶體驗。

/*CSS樣式代碼*/
.scroll {
scroll-behavior: smooth; /*啟用平緩滾動*/
}
/*JS代碼*/
$(window).scroll(function () {
$(".fade-animate").each(function () {
var offset = $(this).offset().top; //獲取元素距離頂部的距離
var scrollTop = $(window).scrollTop(); //獲取滾動條的位置
var windowHeight = $(window).height(); //獲取可視窗口的高度
if (scrollTop + windowHeight >offset) {
$(this).addClass("fade-in"); //添加動畫類
} else {
$(this).removeClass("fade-in"); //移除動畫類
}
});
});

使用CSS3中的scroll-behavior屬性和JS代碼的結合，可以讓頁面呈現出平滑的滾動效果，并且在滾動至指定位置時，觸發相應的動畫效果，增強了頁面的視覺效果和交互體驗。

除此之外，根據實際的需求，還可以結合CSS動畫庫（如Animate.css）、JS插件（如ScrollMagic）等工具來實現更豐富、更多樣的滾動頁面動畫效果。

總之，隨著CSS技術的不斷發展和完善，鼠標滾動頁面動畫效果將會有更多的可能性和變化，是網頁設計中不可或缺的一環。