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

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

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

transform: rotate(要旋轉的度數,正數負數都可deg);

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

transform: skew(xdeg, ydeg);

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

transform: translate(x軸,y軸);

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

transform: scale(width,height);

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

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

p {
color: #000;
transition:color 2s;
}

p:hover { color: #ff0000; }

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

div {
animation: name 5s infinite;
}

@keyframes name {
from {top:0px;}
to {top:200px;}
}

以上是今天CSS動一動, 雖然說志在參加, 但每天都好驚險阿.....T__T
本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_18/