CSS3 0入門筆記(二)

2021-07-11 16:39:30 字數 1384 閱讀 9244

1.transition:運動時間 屬性 運動型別 延遲時間

transition:10s all ease 2s;

transition:1s width linear,2s height ease-in,1s background ease;

2.旋轉transform:rotate(角度deg);

旋轉中心transform-origin:(xpx,ypx)/(%,%)/

縮放transfrom:scale(x倍數,y倍數);【反轉(-1,-1)】

變形傾斜transfrom:skew(xdeg,ydeg);

平移transfrom:translate(xpx,ypx);/(%,%)

線型漸變:background:-webkit-linear-gradient(方向,顏色1 距離,顏色2 距離,顏色2 距離…);

線型漸變_重複:background:-webkit-repeating-linear-gradient(方向,顏色)

方向:top(預設值) left/right/bottom

角度:deg(角度)

徑向漸變:background:-webkit-radial-gradient(方向,形狀,顏色);

徑向漸變_重複:background:-webkit-repeating-radial-gradient(circle,red 0,red 10px,green 10px,green 20px);

方向:center(預設值) left/top/right/bottom 畫素值 xpx ypx,

形狀:橢圓(預設) ellipse 正圓circle

蒙版:-webkit-mask:url(a.png) no-repeat;只顯示有顏色部分(png)

背景蒙版:-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));

文字蒙版:background: -webkit-linear-gradient(red,green,blue,pink);

-webkit-background-clip:text;

color: rgba(0,0,0,0);

CSS3 0屬性集合

變換屬性 transform rotate 設定元素的旋轉角度 格式 transform rotate 角度值 transform rotate 30deg deg代表 度 webkit transform rotate 30deg scale 設定元素的縮放變換 格式 transform scal...

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動畫相容模板

animation keyframes animation webkit keyframes myrotate 100 ms keyframes myrotate 100 keyframes myrotate 100 transition transition 父本檢視設定 perspective ...