这是一款非常有创意的纯CSS3 loading加载文字动画特效。该loading文字特效中，字母O的内圆会不停的放大缩小，使用这个动画效果来提示用户当前的页面或任务正在加载中。
使用方法
HTML结构
该loading文字特效的HTML结构中，不动画的文字使用<span>来制作，动画的文字使用一个三层嵌套的<div>来制作。
<
div
id
=
"cupcake"
class
=
"box"
>
<
span
class
=
"letter"
>L</
span
>
<
div
class
=
"cupcakeCircle box"
>
<
div
class
=
"cupcakeInner box"
>
<
div
class
=
"cupcakeCore box"
></
div
>
</
div
></
div
>
<
span
class
=
"letter box"
>A</
span
>
<
span
class
=
"letter box"
>D</
span
>
<
span
class
=
"letter box"
>I</
span
>
<
span
class
=
"letter box"
>N</
span
>
<
span
class
=
"letter box"
>G</
span
>
</
div
>
|
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
:
500
ms;
animation-direction
:alternate;
animation-timing-function
:ease-in-out;
animation-iteration-count
:infinite;
-webkit-
animation-name
:cupcakeAnimate;
-webkit-
animation-duration
:
500
ms;
-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
:
1
s;
animation-direction
:alternate;
animation-timing-function
:ease-in-out;
animation-iteration-count
:infinite;
-webkit-
animation-name
:coreAnimate;
-webkit-
animation-duration
:
1
s;
-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%
; }
}
|