CSS動效可以為網(wǎng)頁增添生動有趣的效果，其中有一種效果是中間往外伸展的動效，能夠讓頁面元素呈現(xiàn)出充滿活力的視覺效果。

.box {
position: relative;
}
.box .content {
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%; /*使元素呈圓形*/
animation: expand 1s ease-out forwards; /*指定動畫效果及時長*/
}
@keyframes expand {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}

以上是中間往外伸展動效的CSS代碼示例，簡單易懂。其中，設(shè)置了一個`box`的容器元素，包含有一個`content`的子元素，`content`元素為了讓伸展呈"圓形"，通過`border-radius`屬性來設(shè)置為50%。

在`keyframes`關(guān)鍵字中，指定動畫效果及時長。默認的0%寬高均為0，透明度為1，然后在100%時刻，將寬高都設(shè)為200px，同時將透明度設(shè)為0，讓元素逐漸消失。

通過以上的簡單代碼，即可實現(xiàn)中間往外伸展的動效，并可以通過調(diào)整`width`、`height`及`opacity`等屬性來達到不同的效果。CSS動效運用靈活，可以在網(wǎng)頁中實現(xiàn)神奇的效果，讓用戶留下深刻的印象。