CSS3 0屬性集合

2021-10-18 10:36:57 字數 1219 閱讀 3754

變換屬性 transform

rotate()   //設定元素的旋轉角度

格式:transform:rotate(角度值)

transform:rotate(30deg) deg代表°(度)

-webkit-transform:rotate(30deg)

scale() 設定元素的縮放變換

格式:transform:scale(水平縮放倍數,垂直縮放倍數);

transform:scale(0.5,2) //在這裡插入**片

-webkit-transform:scale(0.5,2)

translate() 設定元素的平移變化

格式:transform:translate(水平位移,垂直位移);
skew() 設定元素的扭曲方式

格式:transform:skew(x軸角度,y軸角度);

-webkit-transform:skew(15deg,30deg);

過度屬性 transition 由乙個屬性值緩慢變化到另乙個屬性值的過程

格式:transition:過度屬性 過度所用的時間 過度方式 延遲時間;

transition:width 2s;

-webkit-transition:width 2s;

過度屬性:設定參與過度的css屬性

all表示所有不同的屬性都參與過度。

transition:all 2s linear 0s;

-webkit-transition:all 2s linear 0s;

一般用s秒

過度方式:

linear 線性過度

ease 平滑過渡

ease-in 由慢到快

ease-out由快到慢

ease-in-out 由慢到快再到慢

cubic-bezier(函式) 自定義貝塞爾曲線

單位一般用s

-moz- 代表firefox瀏覽器私有屬性

-ms- 代表ie瀏覽器私有屬性

-webkit- 代表safari、chrome私有屬性

CSS3 0新屬性之box reflect 倒影

例子 上下倒影 webkit box reflect below 0px webkit gradient linear,left top,左上 left bottom,左下 from transparent 起始位置是透明色的 color stop 50 transparent 在50 的位置也是有...

vs怎麼支援css3 0

vs2010 在安裝standards update for vs2010 sp1後,vs2010中沒有css3.0問題,以下是我的解決方法 2 安裝 3 win r 輸入 regedit 開啟登錄檔 4 找到 hkey local machine software wow6432node micr...

CSS3 0入門筆記(二)

1.transition 運動時間 屬性 運動型別 延遲時間 transition 10s all ease 2s transition 1s width linear,2s height ease in,1s background ease 2.旋轉transform rotate 角度deg 旋...