Loading 的菊花图形组合的不太好,基本上实现这个功能了
动画解析
这个动画用到的 CSS3 特性:
transform 主要使用 transform 属性的 rotate,将线条组合成 Loading 图形 (也就是常见的菊花图形)
animation 实现将线条颜色由浅到深,再由深到浅来回变换的动画,通过 animation-delay 属性来使颜色的变换产生过渡的效果,从而达到类似于 Loading 动画的效果
效果实例
HTML Code
CSS Code
.loading {
margin: 0 auto;
position: relative;
}
span {
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;
}
}