CSS文字展開動(dòng)畫是一種很常見的網(wǎng)頁設(shè)計(jì)效果，可以讓頁面更加生動(dòng)有趣。下面我們就來介紹一種實(shí)現(xiàn)該動(dòng)畫效果的CSS代碼。

/* 在 HTML 中，我們需要給文字添加一個(gè)父級(jí)容器 */
這里是標(biāo)題
這里是段落文字
/* 接著，在 CSS 中，我們需要對(duì)上述容器進(jìn)行樣式設(shè)置 */
.container {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-in;
}
/* 然后，當(dāng)鼠標(biāo)懸停在容器上時(shí)，我們需要將最大高度設(shè)置為正常高度 */
.container:hover {
max-height: 999px;
}

上述代碼中，通過設(shè)置容器的最大高度為0，并且在鼠標(biāo)懸停時(shí)將最大高度設(shè)置為正常高度，實(shí)現(xiàn)了文字展開的動(dòng)畫效果。當(dāng)然，還可以通過一些其他的Transform、Opacity等屬性，來讓文字更加生動(dòng)。希望對(duì)您有所幫助。