這是一款很是有創意的純CSS3 loading加載文字動畫特效。該loading文字特效中，字母O的內圓會不停的放大縮小，使用這個動畫效果來提示用戶當前的頁面或任務正在加載中。css
使用方法
HTML結構
該loading文字特效的HTML結構中，不動畫的文字使用<span>來製做，動畫的文字使用一個三層嵌套的<div>來製做。html
<
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屬性，因此佈局會很是混亂。css3
#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效果。web
.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%
; }
}
|