话说上三回，我们用css3的animation让png图片动起来了。

但是美中不足的是，还要画一张图片。如果要求做几个不同大小的菊花，或者要换个颜色，又或者要不同的地方用不同的颜色和大小的菊花，得找到原图(psd之类的)再导出一个不同的size，个人感觉蛋疼死了。

这次咱们用css3来画那几个点，让它能大能小能色，嘿嘿~~(邪恶了)。

先看看效果吧，用鼠标左键狠狠的砸这里。

菊花上有12个点，我们用12个span标签来做，宽高使用百分比，用来自适应外层容器的变化，圆角设置为100%，就可以保证显示成一个圆了。

接下来的事情就比较痛苦，需要一个个摆到正确的位置。但是为了以后的幸福生活哇，咱也得硬着头皮的上是吧。more

好在有了css3的选择器，我们也不用一个个给这些span起名字了，span:nth-child(1)就表示第一个span，nth-child的值是从1开始的，感觉有点怪异。

定位的话用绝对定位，然后用负的margin把圆心偏移回去，位置要自己算好，具体可以看 demo。

css代码我就不贴全了，避免凑字数的嫌疑，关键代码如下:

.loading{
    width: 50px;
    height: 50px;
}
.loading div{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-animation: auto-circle 1s linear infinite ;
    -moz-animation: auto-circle 1s linear infinite ;
}
.loading div span{
    display: block;
    background: #04AED9;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
}
.loading div span:nth-child(1){
    width: 18%;
    height: 18%;
    left: 50%;
    top: 0%;
    margin-left: -9%;
}
.loading div span:nth-child(2){
    width: 16.5%;
    height: 16.5%;
    top: 15%;
    left: 28%;
    margin-left: -8.25%;
    margin-top: -8.25%;
}
/*:nth-child(3)--> :nth-child(12) */

除了loading的外框，全部值都是用百分比，这样12个小点的大小和位置都能随着外框的大小改变而改变了，连颜色都能随便改，爽了吧。

后传:

某产品: 这个菊花改成16px的，那个换成红色的。

苦逼代码男: 32px改成16px是吧，蓝色换成红色是吧。嗯，改完了，吃饭~~

某产品: ......

=== 2012-4-4更新 ===
有同学反映，这个百分比宽度不会算。其实很简单那的呐:

1. 先定下最大的那个圆的宽度，比如这的 第一个，18%;
2. 然后这里的菊花有12个瓣，18 / 12 = 1.5;
3. 之后第二个第三个就一直从18%往下减就行啦