CSS是前端開發必不可缺的一部分，它可以讓網站變得更加美觀、動態，其中動態相冊就是一個很好的例子。在這篇文章中，我們將介紹如何使用CSS來制作動態相冊。

/*首先我們需要創建一個包含相片的父元素*/
.album{
display: flex;
flex-wrap: wrap;
width：100%;
max-width: 800px;
margin: 0 auto;
}
/*然后，我們需要設置每個相片的樣式*/
.photo{
width: 200px;
height: 200px;
background-size: cover;
margin: 20px;
cursor: pointer;
transition: transform .3s ease-in-out;
}
/*當鼠標懸停在相片上，我們需要添加一些效果*/
.photo:hover{
transform: scale(1.05);
}

通過以上CSS代碼，我們已經創建了一個包含相片的父元素，并且設置了每個相片的基本樣式。接下來，我們需要使用一些JavaScript代碼，使用戶可以切換相片。

/*首先，我們需要獲取所有的相片元素*/
const photos = document.querySelectorAll('.photo');
/*然后，我們需要給每個相片元素添加點擊事件*/
photos.forEach(photo =>{
photo.addEventListener('click', () =>{
/*當相片被點擊時，我們需要移除它的兄弟元素的active類*/
photos.forEach(p =>p.classList.remove('active'));
/*并且添加active類到當前被點擊的相片元素*/
photo.classList.add('active');
})
})

通過以上JavaScript代碼，我們已經使用戶可以通過點擊相片來切換相片，并且在切換時，我們使用CSS來達到了有趣的動畫效果。

到此為止，我們已經成功創建了一個CSS動態相冊。在實際應用中，我們可以通過添加額外的CSS樣式和JavaScript代碼，來使相冊更加豐富和有趣。