话说上三回, 我们用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的外框, 全部值都是用百分比, 这样12个小点的大小和位置都能随着外框的大小改变而改变了, 连颜色都能随便改, 爽了吧.
后传:
某产品: 这个菊花改成16px的, 那个换成红色的.
苦逼代码男: 32px改成16px是吧, 蓝色换成红色是吧, 嗯, 改完了, 吃饭~~
某产品: ……
