imAtlas

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

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

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

先看看效果吧, 用鼠标左键狠狠的砸这里.

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

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

好在有了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%往下减就行啦