我正在尝试使用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%;
}
<div class="order">Order</div>
我希望它向上和向下朝着屏幕(在Z轴上)反弹。
4条答案
按热度按时间ht4b089n1#
您可以使用关键帧动画来设置缩放比例的动画,并使按钮反弹:
迭代计数:
如果要在多次"反弹"后停止动画,可以使用
animation-iteration-count
(使用偶数次迭代,否则动画将在最后一次迭代时捕捉):一个二个一个一个
kknvjkwl2#
试试这个CSS
试试这个html
cigdeys33#
答案张贴的web-tiki,将是最好的一个使用,但我有一个不同的方法,因为你已经使用
position:absolute
。看到这个FIDDLE你需要动画高度和宽度的按钮使用关键帧。
为了进一步添加,你也可以动画左和顶部到38px,使按钮看起来不像偏离原来的位置看到这个Fiddle
一个二个一个一个
w6mmgewl4#
您可以设置动画(反弹),如下所示:
检查Fiddle