聚光燈效果是一種非常吸引眼球的效果，可以讓圖片或者某些部分突出顯示。在網站設計中，聚光燈效果也被廣泛使用。本文將介紹如何使用純CSS來實現聚光燈效果。

/* 定義一個外層容器，用于定位 */
.light-container {
position: relative;
}
/* 背景圖 */
.light-container .bg-image {
width: 100%;
height: 100%;
background-image: url(背景圖片);
background-size: cover;
background-position: center;
}
/* 定義聚光燈 */
.light-container .spotlight {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px; /* 聚光燈寬度 */
height: 100px; /* 聚光燈高度 */
border-radius: 50%; /* 圓形聚光燈 */
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.5); /* 通過box-shadow來實現聚光燈效果 */
}
/* 定義遮罩層 */
.light-container .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 遮罩層顏色 */
}
/* 遮罩層和聚光燈的關聯 */
.light-container .mask .spotlight {
display: none;
}
.light-container:hover .mask .spotlight {
display: block;
}

以上是純CSS實現聚光燈效果的代碼。在頁面中，需要定義一個外層容器，并在容器內放置一個背景圖片以及一個遮罩層。同時，還需要在遮罩層上定義一個聚光燈，通過box-shadow屬性來實現效果。

我們還需要注意，遮罩層和聚光燈是通過:hover關聯起來的。也就是說，當鼠標懸停在遮罩層上時，聚光燈才會顯示出來。

最后，在實際使用時，我們可以根據需求自定義聚光燈和遮罩層的大小、顏色等屬性。同時，也可以使用CSS3的動畫效果，讓聚光燈呈現更加生動、流暢的效果。