Html
    Css
    Js

    
                        
.nav_li_pb {
	font-size:18px;
	color:#ef9208;
}
.nav_li_pb i {
	font-style:normal;
}
.nav_li_pb i {
	display:inline-block;
	vertical-align:bottom;
	-webkit-animation-name:fontSizeUp1;
	animation-name:fontSizeUp1;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:steps(1,end);
	animation-timing-function:steps(1,end);
	-webkit-animation-fill-mode:none;
	animation-fill-mode:none;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-transform-origin:50% 75%;
	transform-origin:50% 75%;
}
.nav_li_pb i:nth-of-type(1) {
	-webkit-animation-delay:0s;
	animation-delay:0s;
}
.nav_li_pb i:nth-of-type(2) {
	-webkit-animation-delay:0.5s;
	animation-delay:0.5s;
}
.nav_li_pb i:nth-of-type(3) {
	-webkit-animation-delay:1s;
	animation-delay:1s;
}
.nav_li_pb i:nth-of-type(4) {
	-webkit-animation-delay:1.5s;
	animation-delay:1.5s;
}
.nav_li_pb i:nth-of-type(5) {
	-webkit-animation-delay:2s;
	animation-delay:2s;
}
.nav_li_pb i:nth-of-type(6) {
	-webkit-animation-delay:2.5s;
	animation-delay:2.5s;
}
.nav_li_pb i:nth-of-type(7) {
	-webkit-animation-delay:3s;
	animation-delay:3s;
}
.nav_li_pb i:nth-of-type(8) {
	-webkit-animation-delay:3.5s;
	animation-delay:3.5s;
}
.nav_li_pb i:nth-of-type(9) {
	-webkit-animation-delay:4s;
	animation-delay:4s;
}
.nav_li_pb i:nth-of-type(10) {
	-webkit-animation-delay:4.5s;
	animation-delay:4.5s;
}
.nav_li_pb i:nth-of-type(11) {
	-webkit-animation-delay:5s;
	animation-delay:5s;
}
.nav_li_pb i:nth-of-type(12) {
	-webkit-animation-delay:5.5s;
	animation-delay:5.5s;
}
@-webkit-keyframes fontSizeUp1 {
	0% {
	-webkit-transform:scale(1.25);
	transform:scale(1.25);
}
7%,100% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
}@keyframes fontSizeUp1 {
	0% {
	-webkit-transform:scale(1.25);
	transform:scale(1.25);
}
7%,100% {
	-webkit-transform:scale(1);
	transform:scale(1);
}
}.nav_li_pb .fontSizeUp1 {
	-webkit-animation-name:fontSizeUp1;
	animation-name:fontSizeUp1;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

css跳动的文字动画(原创)

更新时间:2019-08-29 23:45:54

使用简单的css就可以实现文字的跳动

0