CSS3 樹葉飄動是一種非常具有藝術性和動畫效果的網頁設計技術。通過 CSS3 中的 transform, animation 和 keyframes 等屬性,可以實現非常生動有趣的樹葉飄動效果。
/* CSS3 樹葉飄動的代碼 */ /* 創建 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); } } /* 添加動畫效果 */ .leaf { animation: leaf 5s infinite; } /* 定義樹葉的樣式 */ .leaf { width: 50px; height: 50px; background-image: url(leaf.png); background-size: contain; position: absolute; top: 0; left: 0; transform-origin: center center; }
通過調整 keyframes 中的 transform 屬性的值和 animation 中的時間參數可以實現不同的樹葉飄動效果。同時,可以通過添加多個樹葉標簽和動態計算樹葉的位置,使整個頁面呈現出生機勃勃的自然風景。