CSS動畫是一種非常強(qiáng)大的技術(shù)，可以用來為網(wǎng)頁增添一些動態(tài)效果。其中一種非常流行的CSS動畫是上拉收回動畫，利用CSS的transition和transform屬性來實(shí)現(xiàn)。

/*先定義一個包含需要上拉收回的元素的div*/
內(nèi)容
/*將box元素的高度設(shè)為0，并利用transition屬性來實(shí)現(xiàn)平滑的過渡*/
.box {
height: 0;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
/*定義當(dāng)box元素被懸停時，高度變?yōu)樵瓉淼?00%*/
.box:hover {
height: 100%;
}
/*定義box元素上拉收回的動畫效果，利用transform屬性實(shí)現(xiàn)*/
.box:hover p {
transform: translateY(-20px);
}
/*當(dāng)box元素不再懸停時，高度變?yōu)?*/
.box:hover:not(:hover) {
height: 0;
}

利用以上代碼實(shí)現(xiàn)的上拉收回動畫，當(dāng)鼠標(biāo)懸停在包含內(nèi)容的div上時，該元素會以平滑的動畫效果慢慢變高并顯示內(nèi)容。同時，利用transform屬性使元素內(nèi)的文字或圖片等內(nèi)容向上移動一定距離，營造出更加流暢的效果。當(dāng)鼠標(biāo)離開時，元素會再次以同樣的動畫效果慢慢隱藏，直到高度變回初始值0。