CSS3畫面破碎效果是一種非常酷炫的效果，它可以使您的網頁看起來更加生動、有趣。下面我們來一起學習如何實現這種效果。

/*設置容器的寬高*/
.container {
width: 300px;
height: 300px;
position: relative;
}
/*設置圖片的寬高*/
img {
width: 100%;
height: 100%;
}
/*通過after偽類來實現畫面破碎效果*/
.container:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url("破碎紋理.png");
background-repeat: no-repeat;
background-size: 820px 720px;
animation: break 5s linear forwards;
}
/*設置畫面破碎的動畫效果*/
@keyframes break {
0% {
background-position: 0 0;
}
100% {
background-position: -820px -720px;
}
}

在上面的代碼中，我們首先設置了一個容器，容器內嵌入一張圖片。接下來我們通過after偽類來設置背景，并設置了一個畫面破碎的紋理圖片。然后定義了一個名為“break”的動畫，動畫效果為將背景圖片的位置從0 0動畫到-820px -720px。這樣我們就成功實現了畫面破碎效果。