在CSS3的高級技術中,我們可以利用CSS3的一些特效來實現一些有趣的動畫。本文將介紹如何用CSS3實現大象走路動畫。
首先,我們需要對整個動畫的布局進行設計。我們將會以一個大象的行走為例,來實現他在爽朗的大草原上自由自地地前進的過程。
因而,我們應該先是很好的設計一下一個大象的圖案,然后再考慮如何通過動態調整這個圖案的位置和形態來讓他在草原上行走。
.elephant{ position:relative; left:0; top:50%; margin-top:-50px; width:200px; height:100px; background-image:url(elephant.png); background-repeat:no-repeat; }
我們首先利用CSS3的position:absolute屬性來設置大圖案的位置,接下來再通過改變他的left屬性值來實現他向前行走的效果,同時調整total和position的值,來實現動態調整大象圖案的大小和形態的過程:
@-webkit-keyframes elephant-walk{ from{ background-position:0 0; transform:scale(1); } to{ background-position:-2400px 0; transform:scale(0.5); } } .elephant{ animation: elephant-walk 4s infinite linear; }
在上面的代碼中,我們使用了CSS3中所提供的@-webkit-keyframes來描述大象的行走動作,然后讓他不斷重復,以表示大象一直在前進的狀態。
最后,我們需要將前文中的代碼進行綜合,得到如下所示的代碼:
.elephant{ position:relative; left:0; top:50%; margin-top:-50px; width:200px; height:100px; background-image:url(elephant.png); background-repeat:no-repeat; animation: elephant-walk 4s infinite linear; } @-webkit-keyframes elephant-walk{ from{ background-position:0 0; transform:scale(1); } to{ background-position:-2400px 0; transform:scale(0.5); } }
通過這樣的代碼實現,你可以在草原上看到一個逐漸變小的大象,在如此浩瀚的草原上前進,讓您感覺非常有趣,還可以作為一種比較特別的網頁實現來使用哦。
上一篇純css3手風琴代碼