我們經常會看到有的網頁上按鈕由大變小、再由小變大，這樣不停變化的情況。今天就來和大家介紹如何實現這種效果。
首先將效果的實現過程分為兩個階段：
第一階段，按鈕由大變小；
第二階段，按鈕由小變大。
說到這裡，有沒有聯想到 css3 的自定義動畫規則 @keyframes，是的，通過 @keyframes 就可以實現兩個動畫階段的控制。而按鈕大小變化的效果，可以通過 css3 的 transform 屬性實現。
html
css
#btn
@keyframes switch
50%
}
執行效果
gitbub 原始碼
UI動效基礎 AE動效表現課
第01課 ui動效概述 課時1 關於ui動效的介紹及行業概述 課時2 動效設計在工作領域的應用 課時3 動效設計如何學習 第02課 ae軟體基本操作 課時1 介面介紹及合成設定 課時2 合成的建立 課時3 檔案的匯入 課時4 基礎圖層簡介 課時5 形狀圖層的基本操作 課時6 圖層樣式的新增 課時7 ...
css動效學習
總結 transform定義了元素的變形，transition定義了元素的屬性變化樣式，animation與 keyframes則真正的讓元素動起來 不只是變到什麼狀態，更定義了中間過程，k幀 練習1 用css的transition屬性控制opacity和transform translate x,...
android動效開篇
大神部落格 在接下來的時間裡，我會把我之前所做所總結的android動效相關和大家一步步分享，相互交流，相互學習，共同進步，當然裡面難免會有可以更優的實現或方法，大家多多指出 1.animation和animator使用，interpolator 插值器 原理 2.自定義view實現水波紋效果 3....