jQuery 是一個廣泛使用的 JavaScript 庫，其主要作用是簡化 JavaScript 的操作。在網站設計當中，經常需要對頁面元素進行動態的樣式設置，jQuery 提供了易于使用的 CSS 操作方法，能夠讓開發者在網站設計中更加靈活和高效。本文將介紹如何使用 jQuery 來設置 CSS 星空展示效果。

// 創建星空容器
var starContainer = $("<div>");
starContainer.css({
"position": "fixed",
"top": 0,
"left": 0,
"width": "100%",
"height": "100%",
"overflow": "hidden",
"z-index": "-1"  // 設置為非常低，以避免遮蓋其他元素
});
$("body").append(starContainer);
// 添加星星
var numStars = 300;  // 星星數量
for (var i = 0; i < numStars; i++) {
var star = $("<div>");
star.addClass("star");
starContainer.append(star);
// 隨機位置和大小
star.css({
"position": "absolute",
"top": Math.random() * 100 + "%",
"left": Math.random() * 100 + "%",
"width": Math.random() + "px",
"height": Math.random() + "px"
});
}
// 設置星星樣式
$(".star").css({
"background-color": "white",
"border-radius": "50%",
"opacity": "0.5"
});
// 運動動畫
setInterval(function() {
$(".star").each(function() {
// 移動星星
$(this).animate({
"top": "+=1",
"left": "-=1"
}, 50, function() {
// 檢查是否超出屏幕
if ($(this).position().top > starContainer.height()) {
$(this).css({
"top": 0,
"left": Math.random() * 100 + "%"
});
}
if ($(this).position().left < -($(this).width())) {
$(this).css({
"top": Math.random() * 100 + "%",
"left": "100%"
});
}
});
});
}, 50);

以上代碼實現了創建一個星空容器，向其中添加隨機位置和大小的星星，設置星星樣式，并進行星星運動動畫。開發者可以根據自己的需要進行樣式和動畫效果的調整，讓頁面效果更加生動和活潑。使用 jQuery 設置 CSS 星空展示效果可以為網站設計添加視覺上的吸引力，提升用戶體驗。快來試試吧！