純CSS打造相冊效果源碼

近年來，相冊成為了人們記錄生活、分享美好的重要工具，而如何為相冊的展示打造出獨特的效果，也成了網頁設計者的一項重要任務。下面我們就為大家介紹一種純CSS打造相冊效果的源碼。

/* HTML部分 */
<div class="album">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* CSS部分 */
.album {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
padding: 20px;
}
.item {
width: 200px;
height: 200px;
margin: 10px;
background-color: #ddd;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.item:hover {
transform: scale(1.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

以上代碼實現了以相冊為容器，每個相片為一個項目，使用Flex彈性盒模型，實現了排列方式；使用圓角矩形和過渡動畫，為每個項目添加了獨特的效果，讓整個相冊顯得更加有活力和美觀。

以上就是我們為大家簡單介紹的使用純CSS打造相冊效果的源碼。大家可以根據自己的需要進行修改和補充，達到自己想要的效果。希望這個介紹對大家有所幫助。