css3 背景 漸變 過渡 2D變換

2021-09-01 05:28:54 字數 1978 閱讀 8942

背景大小:水平 垂直

原點/起始點:

background-origin:border-box(以邊框為起始點);

background-origin:content-box(以內容為起始點);

background-origin:padding-box(以內邊距為起始點).

背景裁剪:

background-clip:border-box(以邊框裁剪);

background-clip:content-box(以內容裁剪);

background-clip:padding-box(以內邊距裁剪);

background:url() left top no-repeat,right top no-repeat, left bottom no-repeat,right bottom no-repeat;

background:url() no-repeat center center;居中

好好學習!

to left:漸變方向 值2:顏色

background:linear-gradient(45deg,yellow,green);

值1:漸變角度 值2:顏色

50px 50px:距離水平50畫素,垂直50畫素的距離。

background:radial-gradient(100px 50px at center,yellow,green);中心顯示橢圓

100px 50px:由中心點向外輻射的範圍

param1:過度的屬性

param2:過度的時間

簡便方式:transiation:all 3s;

all表示該元素所有屬性。

可分開寫:transiation-property:left;過渡的屬性

​ transiation-duration:2s;過渡的時間

設定過渡的速度:

transiation-timing-function:linear(勻速/線性過渡)/ease(平滑過渡)/ease-in(加速/由慢到快)/

​ ease-out(由慢到快)/ease-in-out(由慢到快再到慢)

都可從x、y方向縮放、扭曲、旋轉、位移

屬性:transform:scale(x,y); 縮放倍數 (x,y)可為小數,不可為負數

​ transform:skew(45deg); 扭曲 單位為角度

​ transform:rotate(45deg); 旋轉 單位為角度

​ 設定旋轉的中心點:transform-origin:center bottom;

​ transform:tranlate(x,y); 位移 x表示水平位移 y表示垂直位移

CSS3漸變 過渡 2d變換

寫法 一 background gradient linear,起點 水平 垂直 終點,color stop 開始漸變的位置,顏色 注 color stop 開始漸變的位置,顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...

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 ...