在網頁設計中，CSS背景顏色的運用是非常重要的。而如何使背景顏色展開、拉伸等動畫效果，也是網頁設計中常見的需求之一。下面將介紹如何使用CSS實現背景顏色展開拉伸動畫。

.demo {
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
overflow: hidden;
}
.demo::before {
content: "";
position: absolute;
width: 100%;
height: 0;
background-color: #0f0;
top:50%;
left: 0;
transform: translateY(-50%);
transition: all .5s ease-in-out;
}
.demo:hover::before {
height: 100%;
}

以上代碼是一個簡單的背景顏色展開拉伸動畫效果的實現。可以看出，我們首先創建了一個固定大小的容器，并使用overflow: hidden;隱藏其它部分。然后，通過在div元素的偽類前添加::before，創建了一個與容器同等大小的偽元素，并將其定位于容器中心。

我們再設置transition: all .5s ease-in-out;實現動畫效果，當鼠標移動到容器上時，應用:hover偽類，讓偽元素的高度從0-100%展開，達到拉伸的效果。這樣，一個簡單的背景顏色展開拉伸動畫效果的實現就完成了。