純css做的安卓開機動畫

隨著css3的發展，越來越多的負責絢麗的效果可以由純css來完成了。用css3實現的動畫效果絲毫不必js實現的遜色，而且瀏覽器對css渲染的速度遠比js快，大多數時候css的體積也不js小。其中css3中的動畫效果可以實現流暢而強大的動畫效果，下面我們來看看css3的能量吧。

下面介紹一個博主完成的純css3實現的仿安卓開機動畫，可愛的安卓機器人。

：

650) this.width=650;" alt="css3-android-animate" src="http://www.bkjia.com/uploads/allimg/131228/1443102M1-0.jpg" width="240" height="150" style="padding:8px;margin:10px 0px;border:1px solid #dddddd;background-color:#f6f6f6;" />

下面給大家提供一個demo可，先睹為快吧。

查看demo

老版本的不相容safari瀏覽器，下面是修改後的版本，safari下測試正常。

經測試，發現safari下沒有效果的原因是，safari不支援虛擬元素after,before的動畫效果，用div替換虛擬元素後safari下運行正常。

查看demo