Loading 的菊花图形组合的不太好，基本上实现这个功能了
动画解析
这个动画用到的 CSS3 特性:
transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)
animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loading 动画的效果
效果实例
HTML Code
CSS Code
.loading {
width: 80px;
height: 60px;
margin: 0 auto;
position: relative;
}
span {
width: 4px;
height: 20px;
background-color: #ccc;
position: absolute;
left: 38px;
-webkit-animation: loading 1s infinite;
}
.line1 {
background-color: #000;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-delay: .3s;
}
.line2 {
top: 5px;
left: 52px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .4s;
}
.line3 {
top: 18px;
left: 57px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .5s;
}
.line4 {
top: 31px;
left: 52px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-animation-delay: .6s;
}
.line5 {
top: 37px;
-webkit-animation-delay: .7s;
}
.line6 {
top: 32px;
left: 24px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-animation-delay: .8s;
}
.line7 {
top: 18px;
left: 19px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .9s;
}
.line8 {
top: 5px;
left: 24px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1s;
}
@-webkit-keyframes loading {
0% {
background-color: #ccc;
}
50% {
background-color: #000;
}
100% {
background-color: #ccc;
}
}
效果示图
