圖片碎片合成動(dòng)畫是一種讓圖片在頁面上以獨(dú)特的方式展示的效果。現(xiàn)在我們可以使用 CSS 實(shí)現(xiàn)這一效果，代碼如下：

.container {
width: 400px;
height: 400px;
background: url('image.jpg') no-repeat;
background-size: 800px 800px;
}
@keyframes fragment {
0% {
background-position: 0px 0px;
}
100% {
background-position: -400px -400px;
}
}
.container:hover {
animation: fragment 2s ease forwards;
}

首先，我們需要一個(gè)包含圖片的容器。這個(gè)容器的大小要和圖片大小相匹配，同時(shí)指定背景圖片并將其居中顯示。

接著，我們使用 CSS 的動(dòng)畫功能，在容器上綁定一個(gè)名為 fragment 的動(dòng)畫，并在其中定義從 0% 到 100% 的關(guān)鍵幀，控制背景圖片的位置。通過改變背景圖片的位置來實(shí)現(xiàn)圖片的切割和移動(dòng)效果。

最后，我們使用 CSS 的:hover 偽類，當(dāng)鼠標(biāo)懸停在容器上時(shí)觸發(fā)動(dòng)畫效果。

以上就是實(shí)現(xiàn)圖片碎片合成動(dòng)畫的基本 CSS 代碼。當(dāng)然，我們還可以通過修改關(guān)鍵幀、調(diào)整動(dòng)畫參數(shù)等方式來改變效果的表現(xiàn)形式。希望這篇文章對您有所幫助。