html跳动按钮效果,html – 使用CSS3使按钮弹跳

您可以使用关键帧动画来设置按钮缩放比例的动画并使其反弹：

.order {

position: absolute;

top: 50px;

left: 50px;

width: 75px;

line-height: 75px;

text-align:center;

opacity: 1;

background: green;

color:#fff;

border-radius:50%;

-webkit-animation: bounce .3s infinite alternate;

-moz-animation: bounce .3s infinite alternate;

animation: bounce .3s infinite alternate;

}

@-webkit-keyframes bounce {

to { -webkit-transform: scale(1.2); }

}

@-moz-keyframes bounce {

to { -moz-transform: scale(1.2); }

}

@keyframes bounce {

to { transform: scale(1.2); }

}

Order

迭代次数：

如果你想在一些“反弹”之后停止动画,你可以使用animation-iteration-count(使用偶数次迭代,否则动画会在最后捕捉)：

.order {

position: absolute;

top: 50px;

left: 50px;

width: 75px;

line-height: 75px;

text-align:center;

opacity: 1;

background: green;

color:#fff;

border-radius:50%;

-webkit-animation: bounce .3s infinite alternate;

-moz-animation: bounce .3s infinite alternate;

animation: bounce .3s infinite alternate;

-webkit-animation-iteration-count: 8;

-moz-animation-iteration-count: 8;

animation-iteration-count: 8;

}

@-webkit-keyframes bounce {

to { -webkit-transform: scale(1.2); }

}

@-moz-keyframes bounce {

to { -moz-transform: scale(1.2); }

}

@keyframes bounce {

to { transform: scale(1.2); }

}

Order