2013年9月2日 星期一

[CSS3] CSS3 transition 試做分享區塊之球體彈性效果

CSS3 的 transition 功能是壞掉的印表機很喜愛的一個屬性,這次壞掉的印表機想以最少的 HTML Code 嘗試僅使用 CSS3 Transition 製作彈性效果,不使用 animation keyframes 製作,並且必須添加陰影效果,每個圖示的原始碼如下

<li> <a href="#"> <img...> </a> </li>

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


CSS3 Transition 效果本身即帶有起始與結束兩個時間點中過渡轉換的動畫效果,利用這樣的特性,在製作網頁選單上面選用 CSS3 transition 會是很方便的一種方式。在 CSS3 中除了 transition 以外的動畫屬性,大概就是 CSS3 的 animation 了,不過由於 animation 本身的一些限制,要做到純 CSS 不使用 javascript 來控制動畫效果,其實有點缺點,建議大家可以多使用 transition 屬性,算是簡單方便又好用喔^^

2 則留言:

shawnbase 提到...

Amos你好~
你的範例都很精彩.
是不是可以介紹如何製作呢

Lee Amos 提到...

Hi~ SHAWNBASE 您好
這些都是我在飛肯設計學苑的上課範例喔~
有些內容會慢慢撰寫教學在csscoke.com~
不過部分範例為了保障學生的權益就不會公開囉~
相關課程資訊在這邊~
http://www.flycan.com.tw/course/course_css3.php

另外一個專門寫網頁設計跟CSS的CSS可樂部落格則請從以下網址進入
http://csscoke.com