<img class="move-img" @click="goGet" width="26px" src="../../assets/img/btn_coupon@2x.png" alt="">
.move-img {
animation-name: scaleDraw; /*关键帧名称*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
animation-iteration-count: infinite; /*动画播放的次数*/
animation-duration: 2s; /*动画所花费的时间*/
}
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1); /*开始为原始大小*/
}
25% {
transform: scale(1.05); /*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.05);
}
}
css图片不断放大缩小的动画效果
最新推荐文章于 2024-07-02 16:31:14 发布