隨着css3的發展,越來越多的負責絢麗的效果可以由純css來完成了。用css3實現的動畫效果絲毫不必js實現的遜色,而且瀏覽器對css渲染的速度遠比js快,大多數時候css的體積也不js小。其中css3中的動畫效果可以實現流暢而強大的動畫效果,下面我們來看看css3的能量吧。
下面介紹一個博主完成的純css3實現的仿安卓開機動畫,可愛的安卓機器人。
效果圖:
下面給大家提供一個demo可下載地址,先睹爲快吧。
老版本的不兼容safari瀏覽器,下面是修改後的版本,safari下測試正常。
經測試,發現safari下沒有效果的原因是,safari不支持僞元素after,before的動畫效果,用div替換僞元素後safari下運行正常。