css动画之按钮放大缩小动态效果——animation

是我别出声

7864人浏览 · 2019-10-09 19:12:36

是我别出声 · 2019-10-09 19:12:36 发布

效果图

<button class="btn">点我</button>

.btn {
animation: scaleDrew 2.5s ease-in-out infinite;
}
@keyframes scaleDrew {
/* 定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称 */
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.05);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.05);
    }
  }