在網頁設計中，常常需要添加動態效果來提高網站的用戶體驗。今天我們來學習如何使用 CSS 實現一個手電筒的特效。

/* 定義手電筒的樣式 */
.light {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
/* 定義手電筒光線的樣式 */
.light::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 0 0 50px 50px rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.3);
transition: transform 0.3s;
}
/* 當手電筒被點擊時，光線擴散 */
.light.clicked::before {
transform: translate(-50%, -50%) scale(1);
}
/* 定義頁面背景的樣式 */
body {
background-image: url("https://picsum.photos/id/237/1920/1080");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

要實現手電筒的效果，我們需要使用 CSS 中的偽元素和過渡動畫。首先，定義一個圓形的手電筒，使用box-shadow添加外發光效果。然后使用::before偽元素添加一個光線，但是不在初始狀態下展示光線。當手電筒被點擊時，通過添加一個.clickedclass，通過 transform 屬性擴大光線。最后，為了展示手電筒效果，添加一個背景圖片。