按鈕大小變化動效

我們經常會看到有的網頁上按鈕由大變小、再由小變大，這樣不停變化的情況。今天就來和大家介紹如何實作這種效果。

首先将效果的實作過程分為兩個階段：

      第一階段，按鈕由大變小；

      第二階段，按鈕由小變大。

說到這裡，有沒有聯想到 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);
    }
}
           

解析：

• 将按鈕的邊框設定為圓角邊框
• 通過 @keyframes 添加自定義動畫，按鈕大小變化通過 transform 屬性控制。動畫起始點為按鈕本來大小，中間變化點将按鈕縮小為本身大小的 60%。按鈕縮小比例可以根據實際需求做相應修改
• 自定義動畫名稱添加至 animation 屬性，并設定動畫時間為 1 秒，動畫次數為無限次

運作效果

Gitbub 源碼

https://github.com/nanzhangren/CSS_skills/blob/master/animation/bigger_btn.html

---------

更多 CSS 技巧，請關注微信公衆号

公衆号菜單欄有微信交流群，歡迎加入~~~