CSS3探測光圈是一種非常炫酷的效果，這種效果可以讓你的網頁看起來很有科技感，下面我們來介紹CSS3探測光圈的使用。

HTML代碼：
<div class="wrapper">
<div class="circle"></div>
<h1>CSS3探測光圈</h1>
</div>
CSS代碼：
.wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("background.jpg");
background-size: cover;
}
.circle {
width: 100px;
height: 100px;
border: 2px solid white;
position: relative;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}
70% {
box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
h1 {
color: white;
font-size: 48px;
z-index: 1;
position: relative;
}

在HTML代碼中，我們定義了一個包裹層"wrapper"，它包含了一個"circle"和一個"h1"。在CSS代碼中，我們設置了包裹層"wrapper"的樣式，包括了它的寬度、高度、背景圖等。"circle"代表光圈，設置了它的寬度、高度、邊框，以及動畫效果。我們使用了@keyframes定義了動畫的效果，包括了box-shadow的四個屬性，在0%和100%時，box-shadow的值是一樣的。但在70%處，我們設置為box-shadow: 0 0 0 25px rgba(255, 255, 255, 0)，這是因為我們希望在光圈達到最大時，可以看到下面的文字。最后，我們設置"h1"的字體大小、顏色和z-index，使得它可以被光圈遮擋。