CSS 屏幕收縮動畫效果是現代網頁設計中非常流行的一種效果，它可以為網頁增加一些生動、富有活力的動態效果，吸引用戶的注意力。下面我們將介紹如何使用 CSS 實現屏幕收縮動畫效果。

/* CSS樣式代碼開始 */
.container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
text-align: center;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #28a745;
z-index: 0;
animation: shrink 4s ease forwards;
}
@keyframes shrink {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
/* CSS樣式代碼結束 */

首先，我們需要一個容器來包含我們的動畫效果，這個容器可以是一個 div 元素，它的寬度和高度都需要設置成 100%。我們還需要設置 overflow 屬性為 hidden，以隱藏容器內部元素的溢出部分。

接下來，我們需要在容器中放置兩個元素：一個是背景元素，另一個是內容元素。背景元素應該被放置在內容元素之后，并設置為絕對定位，覆蓋整個容器，以便它成為收縮動畫的核心元素。而內容元素應該被放置在容器的中間位置，并設置為絕對定位，水平和垂直方向上居中對齊。

接下來，我們需要使用 CSS3 的動畫特性來實現屏幕收縮動畫效果。我們可以使用 keyframes 關鍵字定義一個名為 shrink 的動畫，這個動畫包括兩個關鍵幀：一個是從 0% 到 100% 的關鍵幀，控制動畫的開始狀態；另一個是從 100% 到 0% 的關鍵幀，控制動畫的結束狀態。

在動畫的開始狀態下，我們需要將背景元素的 transform 屬性設置成 scale(1)，意味著它需要原始的大小，而 opacity 屬性應該設置成 1，意味著它需要完全可見。在動畫的結束狀態下，我們需要將背景元素的 transform 屬性設置成 scale(0)，意味著它需要變成一個很小的點，而 opacity 屬性應該設置成 0，意味著它需要完全不可見。

最后，我們需要將動畫關聯到背景元素上，并指定它的持續時間為 4 秒鐘，緩動方式為 ease，并指定動畫結束后的狀態為 forwards，這樣背景元素就可以在動畫結束后一直保持在縮小之后的狀態。