CSS 碎屏效果是一種酷炫的效果，它可以給頁面帶來一種獨(dú)特的視覺感受。為了實(shí)現(xiàn)這種效果，我們需要使用一些 CSS 技巧和動畫。

/* 在 body 上設(shè)置背景圖 */
body {
background-image: url('https://cdn.pixabay.com/photo/2021/05/17/01/23/sea-6259356_960_720.jpg');
background-size: cover;
background-position: center;
}
/* 定義碎屏效果的樣式 */
.screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(https://cdn.pixabay.com/photo/2021/08/13/08/08/jagged-6543084_960_720.png);
background-size: 700% 700%;
animation: fragment 5s ease-in-out forwards;
}
/* 定義碎屏動畫 */
@keyframes fragment {
0% {
background-position: 0 0;
}
50% {
background-size: 1200% 1200%;
transform: scale(1.1);
}
100% {
background-position: 100% 100%;
transform: scale(1.5);
}
}

我們首先在 body 上設(shè)置了一個背景圖。接下來，我們定義了一個名為 screen 的 div 元素，其 position 屬性設(shè)置為 absolute，覆蓋整個頁面。我們還定義了一個偽元素 :after，在其中設(shè)置了碎屏效果的樣式，包括背景圖、大小和動畫。我們使用了 background-size 屬性來扭曲背景圖的比例，創(chuàng)建碎片狀的效果。在動畫中，我們使用了 background-position 和 transform 屬性，將背景圖放大并移動到最大值時呈現(xiàn)完整的背景圖，同時屏幕也被放大，創(chuàng)造出碎屏的效果。

在 HTML 中，我們只需要將一個 div 元素添加到頁面中即可：

<div class="screen"></div>