按钮大小变化动效

我们经常会看到有的网页上按钮由大变小、再由小变大，这样不停变化的情况。今天就来和大家介绍如何实现这种效果。

首先将效果的实现过程分为两个阶段：

      第一阶段，按钮由大变小；

      第二阶段，按钮由小变大。

说到这里，有没有联想到 CSS3 的自定义动画规则 @keyframes，是的，通过 @keyframes 就可以实现两个动画阶段的控制。而按钮大小变化的效果，可以通过 CSS3 的 transform 属性实现。

HTML

<input type="button" id="btn" value="我会变" />

解析：

• html 中添加按钮标签

CSS

#btn {
    width: 120px;
    height: 45px;
    background-color: greenyellow;
    border-radius: 45px;
    font-size: 16px;
    animation: switch 1s ease-out infinite;
}

@keyframes switch {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.6);
    }
}

解析：

• 将按钮的边框设置为圆角边框
• 通过 @keyfra