CSS3聚光燈效果是一種很有趣的效果，在網站設計中很常見。它可以使頁面中的某個元素光亮、閃閃發光。下面我們來詳細了解一下這個效果的實現方法。

/* 基本樣式 */
.spotlight {
border-radius: 100%;
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
overflow: hidden;
}
/* 光亮效果 */
.spotlight::before {
content: "";
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: -50px;
left: -50px;
background-color: rgba(255, 255, 255, 0.9);
transform: scale(0);
transition: transform 0.5s ease-out;
}
.spotlight:hover::before {
transform: scale(3);
}

首先，我們需要先創建一個基本的樣式，這里我們以一個圓形的div為例，設置寬高為200px，并設置border-radius為100%來實現圓形效果。這個div的position屬性設為relative，overflow屬性設為hidden，以后我們會用到里面的偽元素進行光亮效果的設置。

接著，我們需要在這個div的偽元素before中設置光亮效果。首先要設置content屬性為空，以便讓偽元素出現在div中。然后width、height、border-radius屬性與div相同，top和left屬性設為-50px，這樣偽元素可以比div更大一些，產生聚光燈的效果。background-color屬性設置為rgba(255, 255, 255, 0.9)，即白色半透明；transform屬性設為scale(0)，讓偽元素變得很小不可見。最后，設置了一個transition過渡屬性，讓光亮出現和消失時有一種緩慢的效果。

最后一個重要的部分就是通過:hover偽類來實現光亮出現的效果。當鼠標懸停在div上時，它的偽元素before的scale屬性變為3，即變得很大，以產生明亮的效果。這里的transition屬性會使整個效果變得更加平滑。這樣，一個基本的CSS3聚光燈效果就完成了。