CSS3漸變 過渡 2d變換

2021-08-08 01:30:45 字數 1631 閱讀 1929

寫法(一):

background:gradient(linear,起點(水平 垂直),終點,

color-stop(

開始漸變的位置,顏色

) );

注:color-stop(開始漸變的位置,顏色

) , ...

後面可以連著寫多個值。

寫法(二):

background:-webkit-linear-gradient(方向

||角度(

deg),顏色 開始漸變的位置)

background:-webkit-linear-gradient(top,red 10%,blue 50%,purple 80%);

寫法(一)

background:-webkit-radial-gradient(圓心,顏色 漸變開始的位置)

例:background:-webkit-radial-gradient(0 0,red 5%,purple 50%,pink 80%);

寫法(二)

漸變的形式:circle圓

ellipse

橢圓形

漸變的大小:closest-side:最近邊;

farthest-side

:最遠邊;

closest-corner:最近角;

farthest-corner

:最遠角(預設值)

background:-webkit-radial-gradient(圓心,漸變的形式

||漸變的大小,顏色 漸變開始的位置)

例:background: -webkit-radial-gradient(center,circle farthest-side,red,blue);

background:-webkit-repeating-形式

-gradient()  

重複漸變

linear線性

ease

慢進慢出   

ease-in

慢進  

ease-out

慢出 連寫:transform:

translate( x , y );

注:跟relative 相似

單寫:transform:

translatex ||y(

數值 ||

百分比

);值大於1,代表放大的倍數。值小於

1,縮小。縮放的中心點在元素中間

transform:scale(x,y) 縮放變換

transform:

scalex(x) transform

:scaley(y) ;

transform:rotate(角度

) 旋轉變換

順時針為正,旋轉的中心點在元素中間

transform-origin改變變換的中心點

transform-origin:100% 100%;

transform:skew(xdeg,ydeg) 扭曲變換,改變的是圖形的形狀

transform:skewx(

角度); transform:skewx(30deg) skewy(30deg);

css3 背景 漸變 過渡 2D變換

背景大小 水平 垂直 原點 起始點 background origin border box 以邊框為起始點 background origin content box 以內容為起始點 background origin padding box 以內邊距為起始點 背景裁剪 background cl...

css旋轉45度 css 漸變過渡2D

一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發,並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件,如 hover 滑鼠劃過事件 1.transition prop...

CSS3之過渡及2D變換

transition duration 運動時間 transition delay 延遲時間 transition timing function 運動形式 ease 逐漸變慢 預設 linear 勻速 ease in 加速 ease out 減速 ease in out 先加速後減速 cubic ...