这是一款非常有创意的纯CSS3 loading加载文字动画特效。该loading文字特效中，字母O的内圆会不停的放大缩小，使用这个动画效果来提示用户当前的页面或任务正在加载中。
使用方法
HTML结构
该loading文字特效的HTML结构中，不动画的文字使用来制作，动画的文字使用一个三层嵌套的
来制作。
L
A
D
I
N
G
CSS样式
这个loading特效中的布局使用的是flex布局方式。IE11以下的浏览器都不支持CSS flex属性，所以布局会非常混乱。
#cupcake{
flex-direction:row;
-webkit-flex-direction:row;
-ms-flex-direction:row;
-mos-flex-direction:row;
-o-flex-direction:row;
justify-content:center;
-webkit-justify-content:center;
-ms-justify-content:center;
height:100%;
width:100%;
background-color:#FFD454;
}
.letter{
font-size:100px;
color:#222;
font-family:tahoma;
}
.box{
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.cupcakeCircle, .cupcakeInner, .cupcakeCore{
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
}
.cupcake, .letter, .cupcakeCircle, .cupcakeInner, .cupcakeCore{
flex:none;
-webkit-flex:none;
-moz-flex:none;
-ms-flex:none;
-o-flex:none;
}
.letter, .cupcakeCircle{
align-self:center;
-webkit-align-self:center;
-moz-align-self:center;
-o-align-self:center;
-ms-align-self:center;
}
.cupcakeCircle{
align-items:center;
-ms-align-items:center;
justify-content:center;
-ms-justify-content:center;
height:100px;
width:100px;
background-color:#222;
}
字母的动画使用的是CSS animation来制作。动画被设置为无线循环，并使用ease-in-out的easing效果。
.cupcakeInner{
align-self:center;
-ms-align-self:center;
justify-content:center;
-ms-justify-content:center;
height:50%;
width:50%;
background-color:#FFD454;
animation-name:cupcakeAnimate;
animation-duration:500ms;
animation-direction:alternate;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-name:cupcakeAnimate;
-webkit-animation-duration:500ms;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
}
.cupcakeCore{
align-self:center;
-ms-align-self:center;
height:25%;
width:25%;
background-color:#222;
animation-name:coreAnimate;
animation-duration:1s;
animation-direction:alternate;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-name:coreAnimate;
-webkit-animation-duration:1s;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes cupcakeAnimate{
to{ height:90%; width:90%; }
}
@keyframes cupcakeAnimate{
to{ height:90%; width:90%; }
}
@-webkit-keyframes coreAnimate{
to{ height:90%; width:90%; }
}
@keyframes coreAnimate{
to{ height:90%; width:90%; }
}
