CSS3 樹(shù)葉飄動(dòng)是一種非常具有藝術(shù)性和動(dòng)畫(huà)效果的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。通過(guò) CSS3 中的 transform, animation 和 keyframes 等屬性，可以實(shí)現(xiàn)非常生動(dòng)有趣的樹(shù)葉飄動(dòng)效果。

/* CSS3 樹(shù)葉飄動(dòng)的代碼 */
/* 創(chuàng)建 keyframes */
@keyframes leaf {
0% {
transform: rotate(0deg) translateX(0px) translateY(0px);
}
50% {
transform: rotate(60deg) translateX(60px) translateY(50px);
}
100% {
transform: rotate(-30deg) translateX(120px) translateY(100px);
}
}
/* 添加動(dòng)畫(huà)效果 */
.leaf {
animation: leaf 5s infinite;
}
/* 定義樹(shù)葉的樣式 */
.leaf {
width: 50px;
height: 50px;
background-image: url(leaf.png);
background-size: contain;
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
}

通過(guò)調(diào)整 keyframes 中的 transform 屬性的值和 animation 中的時(shí)間參數(shù)可以實(shí)現(xiàn)不同的樹(shù)葉飄動(dòng)效果。同時(shí)，可以通過(guò)添加多個(gè)樹(shù)葉標(biāo)簽和動(dòng)態(tài)計(jì)算樹(shù)葉的位置，使整個(gè)頁(yè)面呈現(xiàn)出生機(jī)勃勃的自然風(fēng)景。