驚喜相冊是一種添加巧妙動效的相冊展示方式，可以讓用戶在不同的照片之間切換時感受到不同的驚喜和快樂。在CSS中添加一些樣式代碼可以實現這樣的效果。

/*設置相框寬高*/
.photo-frame{
width: 240px;
height: 160px;
overflow: hidden; /*隱藏超出框架的照片*/
position: relative; /*設置為相對定位，使之后絕對定位的元素相對于此元素*/
}
/*設置照片定位*/
.photo-frame img{
position: absolute; /*設為絕對定位，可以通過left、top等屬性控制其位置*/
max-width: 100%; /*限制圖片的最大寬度*/
}
/*設置動畫效果*/
.photo-frame:hover img{
transform: scale(1.2); /*鼠標懸浮時照片放大*/
transition: transform 0.5s ease-out; /*設置過渡時間和動畫效果*/
}
.photo-frame img:nth-child(1){ /*設置第一張照片的位置*/
left: 0; 
}
.photo-frame img:nth-child(2){ /*設置第二張照片的位置*/
left: -30px;
}
.photo-frame img:nth-child(3){ /*設置第三張照片的位置*/
left: -60px;
}
.photo-frame img:nth-child(4){ /*設置第四張照片的位置*/
left: -90px;
}
.photo-frame img:nth-child(5){ /*設置第五張照片的位置*/
left: -120px;
}

在相框中添加照片后，設置一些屬性以及動畫效果即可實現驚喜相冊的效果。通過:hover和transition屬性使得照片在鼠標懸浮時產生動畫效果，從而進行快速切換和展示多張照片。