10 09/2014

simulate google ajax indacator

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

google ajax indacator 用的是图片,然后不断 change background-position。俺准备用 css 模拟一下,:)

思路

四个小球在容器中,左右上下对角移动 animation,然后加上 z-index 切换(任何一个球都有机会显示在最上面)和球形渐变。最后加上 firefox css prefix。ie?no!

html

html 代码很简单。

<div class="google-ajax-indi"><div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div></div>    

css

我写的是 less。当然你也可以直接查看 css