CSS3中的展開效果可以用來添加動態和有趣的觸發器，這是一個非常酷的效果。下面我們將介紹如何使用CSS3實現從中間展開的效果。

.section {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.square {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
transform-origin: center;
transform: scale(0);
transition: transform 0.3s ease-in-out;
}
.section:hover .square {
transform: scale(1);
}

在這段代碼中，我們首先使用display: flex和justify-content: center; align-items: center;將元素垂直和水平居中。然后使用overflow: hidden隱藏元素溢出的內容。

我們創建了一個.square元素，寬度和高度都為100%并絕對定位。它的背景顏色為黑色，點綴元素展開的動畫效果。我們可以使用transform-origin屬性和transform屬性調整動畫效果。

最后，我們使用transition屬性來實現從中間展開的效果。當鼠標懸停在元素上時，它會從中間展開并呈現黑色背景，形成動態效果。