CSS3的特殊效果也是不得不提的功能之一, 有了它可以減少些jQuery撰寫, 對我來說相當方便.
以下紀錄一些用法, 若有誤還請指正, 謝謝.
Transforms
Transform這個詞讓我一直聯想到變形金鋼(笑)
而Transforms也快跟變形金鋼一樣囉!變化越來越多了~
方塊可以不用直挺挺的站著, 轉一下吧~rotate可讓物件旋轉, deg就是度的意思.
|
1 |
; html-script: false ]transform: rotate(要旋轉的度數,正數負數都可deg); |
skew是傾斜, 寫法跟rotate相同, 是填入度數的.
但不同的是skew提供兩個值,分別是水平的傾斜(xdeg)以及垂直的傾斜(ydeg).
|
1 |
; html-script: false ]transform: skew(xdeg, ydeg); |
translate屬性可以控制物件位移的方向,數值是x軸與y軸的距離,
而位移的計算是從原本物件的位置開始算起唷.
|
1 |
; html-script: false ]transform: translate(x軸,y軸); |
scale想當然爾就是放大縮小哩~一樣提供寬度與高度的縮放,
數值代表比例, 如果是縮小就加負數:
|
1 |
; html-script: false ]transform: scale(width,height); |
以上這些Transforms效果都可以單做水平或者是垂直效果,
只要名字後面加個x(或y), 數值填入一個即可.
跟padding-left, margin-right等等是一樣的道理.
transition
有點算是hover進階版!在滑鼠hover物件的期間, 呈現一些動態效果, 讓網頁更生動活潑~
要下在物件的CSS值為: 漸變屬性 時間(秒=s)
而要下在hover動態上的CSS就是”物件要成為的樣子”囉!
例如我想把黑色的文字用兩秒的時間讓它由黑轉紅:
|
1 2 3 4 5 |
; html-script: false ]p { color: #000; transition:color 2s; } p:hover { color: #ff0000; } |
animation
這是我個人認為最神奇的效果之一了~不說的話沒人相信這不用jQuery喔, 哈
做法也不難,首先先在物件設定:keyframe名稱 時間(秒/s) 移動速率三個數值後,
再設定keyframes, 也就是關鍵影格–動畫要在什麼時間移動到什麼地方就看這裡了.
以下CSS來自w3school:
|
1 2 3 4 5 6 7 8 |
; html-script: false ]div { animation: name 5s infinite; } @keyframes name { from {top:0px;} to {top:200px;} } |
以上是今天CSS動一動, 雖然說志在參加, 但每天都好驚險阿…..T__T
本文同步發表於http://ithelp.ithome.com.tw/question/10138825