html文字逐个出现 css,CSS3 字母逐个显示动画
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);body {background: #333;color: #eee;font-size: 34px;font-family: "Open Sans";}.wrap {width: 250px;text-align: center;pos
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
body {
background: #333;
color: #eee;
font-size: 34px;
font-family: "Open Sans";
}
.wrap {
width: 250px;
text-align: center;
position: absolute;
top: 40%;
left: 50%;
margin-left: -125px;
}
.wrap div {
display: inline;
margin: -2px;
}
.l {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.o {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 0.21875s;
animation-delay: 0.21875s;
}
.a {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 0.4375s;
animation-delay: 0.4375s;
}
.d {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 0.65625s;
animation-delay: 0.65625s;
}
.i {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 0.875s;
animation-delay: 0.875s;
}
.n {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 1.09375s;
animation-delay: 1.09375s;
}
.g {
-webkit-animation: shrinkgrow 1.75s ease-in-out infinite;
animation: shrinkgrow 1.75s ease-in-out infinite;
-webkit-animation-delay: 1.3125s;
animation-delay: 1.3125s;
}
@-webkit-keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)