母亲节html页面,css3母亲节主题文字动画特效

特效描述：css3 母亲节主题 文字动画特效，一段简单的css3文字动画代码，对即将到来的母亲节主题文字背景动画，妈妈您辛苦了。

代码结构

1. HTML代码

妈妈您辛苦了

@keyframes loading {

0%, 100% {

-moz-transform: scale(1) rotateZ(0deg);

-ms-transform: scale(1) rotateZ(0deg);

-webkit-transform: scale(1) rotateZ(0deg);

transform: scale(1) rotateZ(0deg);

opacity: 1;

}

26% {

-moz-transform: scale(1.1) rotateZ(12deg);

-ms-transform: scale(1.1) rotateZ(12deg);

-webkit-transform: scale(1.1) rotateZ(12deg);

transform: scale(1.1) rotateZ(12deg);

opacity: .2;

}

76% {

-moz-transform: scale(0.8) rotateZ(-8deg);

-ms-transform: scale(0.8) rotateZ(-8deg);

-webkit-transform: scale(0.8) rotateZ(-8deg);

transform: scale(0.8) rotateZ(-8deg);

opacity: .6;

}

}

.loader {

overflow: hidden;

font-size: 40px;

}

.loader span {

-moz-animation: loading 1s linear infinite -0.8s;

-webkit-animation: loading 1s linear infinite -0.8s;

animation: loading 1s linear infinite -0.8s;

float: left;

}

.loader .span2 {

-moz-animation: loading 1s linear infinite -0.2s;

-webkit-animation: loading 1s linear infinite -0.2s;

animation: loading 1s linear infinite -0.2s;

}

.loader .span3 {

-moz-animation: loading 1s linear infinite -0.5s;

-webkit-animation: loading 1s linear infinite -0.5s;

animation: loading 1s linear infinite -0.5s;

}

.loader .span4 {

-moz-animation: loading 1s linear infinite -1.1s;

-webkit-animation: loading 1s linear infinite -1.1s;

animation: loading 1s linear infinite -1.1s;

}

.loader .span5 {

-moz-animation: loading 1s linear infinite -0.36s;

-webkit-animation: loading 1s linear infinite -0.36s;

animation: loading 1s linear infinite -0.36s;

}

.loader .span6 {

-moz-animation: loading 1s linear infinite -0.65s;

-webkit-animation: loading 1s linear infinite -0.65s;

animation: loading 1s linear infinite -0.65s;

}

.loader .span7 {

-moz-animation: loading 1s linear infinite -0.93s;

-webkit-animation: loading 1s linear infinite -0.93s;

animation: loading 1s linear infinite -0.93s;

}

.font1 {

font-family: 'Helvetica',Arial,sans-serif;

}

.font2 {

font-family: Impact;

}

.font3 {

font-family: "Times ";

}

.font4 {

font-family: "Comic Sans Ms",sans-serif;

font-weight: bold;

}

"

I

love

you

，

just

like

the

first

.

"

My

mother

who

has

been

caring

for

my

growth

has

been

hard

.

“我爱你，一如最初。”一直呵护我成长的妈妈，辛苦了。