CSS3 Transition 橡皮筋效果試做

CSS3 transition rubber effect

3 的 功能是Amos很喜愛的一個屬性,這次Amos想以最少的 HTML Code 嘗試僅使用 3 Transition 製作橡皮筋彈性效果,不使用 animation keyframes 製作,並且必須添加陰影效果,每個圖示的原始碼如下:

很乾淨對吧^^,製作上希望球體能向上彈起並有彈性效果,在球體的下方則必須要有陰影產生,陰影的效果必須配合球體的彈性有大小的變化,此外,在球體往上彈起之前必須讓球體稍微往下縮一點,讓他更有準備彈起蓄勢待發的Fu~

由於 transition 屬性本身有個限制,就是沒有辦法跟 的 animation 屬性一樣可拆分多段動畫來呈現,也因此造成在製作此效果時的一個困難度,上面這段影片就是實際範例影片,影片一開始是使用 Transition 的 ease-out 速度設定,所以看不出來有任何的橡皮筋效果,到了第二段就可以看到Q彈的橡皮筋效果囉^^~如果各位對此效果有任何建議也請不吝指教,謝謝~