最近我學習了一種非常有用的技能——CSS相冊切換動態效果。它可以給網站添加更多的交互性和生動性。下面就和大家分享一下如何實現這個效果。

/* CSS代碼 */
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 200px;
height: 200px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
cursor: pointer;
}
.active {
transform: scale(1.2); /* 點擊放大效果 */
z-index: 1; /* 置頂顯示 */
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

首先我們需要一個包含多張圖片的相冊，可以使用HTML的``標簽插入多張圖片。接著，我們使用CSS實現了相冊的排版和圖片的基礎樣式，設置圖片的寬度和高度、間距、邊框圓角和陰影等效果。我們還為圖片添加了鼠標樣式，當鼠標移動到圖片上時，會變為手型。

接下來就是實現動態效果，當我們點擊某一張圖片時，它會放大、置頂并增加陰影，同時其他圖片還原。實現這個效果需要使用JavaScript監聽圖片的點擊事件，并修改當前圖片的樣式，同時還原其他圖片的樣式。

/* JavaScript代碼 */
const gallery = document.querySelector('.gallery');
gallery.addEventListener('click', e =>{
if (e.target.tagName === 'IMG') {
const active = gallery.querySelector('.active');
if (active) active.classList.remove('active');
e.target.classList.add('active');
}
});

在JavaScript中，我們通過`querySelector()`方法獲取到相冊所在的DOM節點。我們為相冊添加了點擊事件監聽器，并使用if語句判斷點擊的元素是否為``標簽。如果是，就獲取當前有`.active`類的元素，先將其類刪除，然后為當前點擊的圖片添加`.active`類。這樣，就實現了我們想要的效果。

最后，我們通過CSS和JavaScript的結合，完成了CSS相冊切換動態，讓網站更加生動有趣。