Beauty CSS(7)-CSS動一動

CSS3的特殊效果也是不得不提的功能之一, 有了它可以減少些jQuery撰寫, 對我來說相當方便.
以下紀錄一些用法, 若有誤還請指正, 謝謝.

Transforms
Transform這個詞讓我一直聯想到變形金鋼(笑)
而Transforms也快跟變形金鋼一樣囉!變化越來越多了~

方塊可以不用直挺挺的站著, 轉一下吧~rotate可讓物件旋轉, deg就是度的意思.

skew是傾斜, 寫法跟rotate相同, 是填入度數的.
但不同的是skew提供兩個值,分別是水平的傾斜(xdeg)以及垂直的傾斜(ydeg).

translate屬性可以控制物件位移的方向,數值是x軸與y軸的距離,
而位移的計算是從原本物件的位置開始算起唷.

scale想當然爾就是放大縮小哩~一樣提供寬度與高度的縮放,
數值代表比例, 如果是縮小就加負數:

以上這些Transforms效果都可以單做水平或者是垂直效果,
只要名字後面加個x(或y), 數值填入一個即可.
跟padding-left, margin-right等等是一樣的道理.

transition
有點算是hover進階版!在滑鼠hover物件的期間, 呈現一些動態效果, 讓網頁更生動活潑~
要下在物件的CSS值為: 漸變屬性 時間(秒=s)
而要下在hover動態上的CSS就是”物件要成為的樣子”囉!
例如我想把黑色的文字用兩秒的時間讓它由黑轉紅:

animation
這是我個人認為最神奇的效果之一了~不說的話沒人相信這不用jQuery喔, 哈
做法也不難,首先先在物件設定:keyframe名稱 時間(秒/s) 移動速率三個數值後,
再設定keyframes, 也就是關鍵影格–動畫要在什麼時間移動到什麼地方就看這裡了.
以下CSS來自w3school:

以上是今天CSS動一動, 雖然說志在參加, 但每天都好驚險阿…..T__T
本文同步發表於http://ithelp.ithome.com.tw/question/10138825

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.