作者:布瓜Pourqu2502854853 | 来源:互联网 | 2023-05-18 12:57
我试图让这个按钮与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%;
}
Order
我希望它能够向上和向下跳到屏幕(Z轴上).
1> web-tiki..:
您可以使用关键帧动画来设置按钮缩放比例的动画并使其反弹:
.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