CSS3動畫是現代網頁設計的一個重要方面,它可以讓網頁元素更加生動有趣。下面我們來介紹一個使用CSS3動畫實現小男孩走路的示例。
通過上面的代碼,我們創建一個id為walkman的div,并在其中添加兩個表示小男孩腳的div,分別設置類名為leg left和leg right。在CSS中,我們為小男孩和他的腳定義了各自的樣式,并通過關鍵幀動畫行走的效果。
關鍵幀動畫walk定義了小男孩走路的過程,從走路開始到結束分為五個階段,分別對應百分比0%、25%、50%、75%和100%。在每個階段中,我們給小男孩設置不同的transform值和旋轉角度,實現其走路的效果。
而小男孩腳的動畫則定義了一種交替出現的效果,animation屬性的參數infinite表示動畫循環播放。
通過這樣的方式,我們可以使用CSS3動畫很好地展現出小男孩生動的走路姿態,從而使得網頁更加生動有趣。
上一篇css3動畫實例漸現