抖音上很火的相冊 CSS 是一款讓相冊樣式瞬間變得好看的前端技術。如今，越來越多人開始在自己的抖音個人主頁上應用這款 CSS，讓自己的主頁看起來更加整潔、美觀、時尚。

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
}
.gallery .image-wrapper {
position: relative;
width: 32%;
margin-bottom: 2%;
}
.gallery .image-wrapper .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.3s ease-out;
}
.gallery .image-wrapper:hover .overlay {
opacity: 1;
}
.gallery .image-wrapper .image {
width: 100%;
height: 0;
background-size: cover;
background-position: center;
padding-bottom: 100%;
transition: transform 0.3s ease-out;
}
.gallery .image-wrapper:hover .image {
transform: scale(1.05);
}

如上就是這款相冊 CSS 的主要代碼，它運用了 CSS3 的 transition、flexbox 等新特性，讓圖片在鼠標懸停時有一個自然的縮放效果，同時添加了一個半透明的背景色，增加了主頁的時尚感。大家只需要按照上述代碼編寫自己的 HTML 文件，就可以讓自己的相冊變得更美觀了。