樹是大地的綠化護(hù)衛(wèi)，樹的成長(zhǎng)也是一個(gè)漫長(zhǎng)而不斷的過(guò)程。那么，如何用CSS動(dòng)畫來(lái)展現(xiàn)樹木的成長(zhǎng)呢？

.tree {
position: relative;
width: 150px;
height: 200px;
}
.tree::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-top: 100px solid #8BC34A;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
transform: translate(-50%);
animation: grow 5s ease-in-out forwards;
}
@keyframes grow {
from {
height: 0;
}
to {
height: 100px;
}
}

如上代碼所示，我們的樹是個(gè)`before`偽元素，這可以避免污染DOM。我們用一個(gè)較大的三角形作為樹的主干，然后利用CSS動(dòng)畫中的`keyframes`將樹干逐漸生長(zhǎng)。

接下來(lái)，我們需要給樹木添加樹葉。這可以通過(guò)`box-shadow`屬性和`radial-gradient()`實(shí)現(xiàn)。

.tree::after {
content: "";
position: absolute;
top: 75px;
left: 50%;
width: 0;
height: 0;
border-top: 0 transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
box-shadow:
0 20px #8BC34A,
-10px 30px #8BC34A,
10px 30px #8BC34A,
-20px 40px #8BC34A,
0 40px #8BC34A,
20px 40px #8BC34A,
-30px 50px #8BC34A,
-10px 50px #8BC34A,
10px 50px #8BC34A,
30px 50px #8BC34A;
transform: translate(-50%);
}

通過(guò)盒陰影`box-shadow`屬性和`radial-gradient()`我們可以模擬出樹葉，而`transform: translate(-50%)`讓樹葉居中。

最后，我們給樹木添加風(fēng)吹動(dòng)的效果。

.tree:hover::before {
animation: sway 0.6s ease-in-out infinite alternate;
}
@keyframes sway {
to {
transform: rotateZ(3deg);
}
}

為了讓樹葉像是被樹枝吹拂，我們?cè)赻hover`偽類中用`keyframes`中的`rotateZ()`旋轉(zhuǎn)樹干。

以上就是關(guān)于如何用CSS動(dòng)畫展示樹木成長(zhǎng)的教程。希望能對(duì)您有所幫助。