css图片不断放大缩小的动画效果

<img class="move-img" @click="goGet" width="26px" src="../../assets/img/[email protected]" 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);
  }
}

在这里插入图片描述

原创文章 65 获赞 73 访问量 7744

猜你喜欢

转载自blog.csdn.net/qq_43592064/article/details/105599063