css3新特性 過渡 動畫 2d 3d轉換

過渡

過渡三要素：

1.必須要有屬性發生變化 如：width background等

2.必須要告訴系統哪個屬性需要執行過渡效果：transition-property:width,background;

3.必須告訴系統過渡效果的持續時長：transition-duration:5s,5s;

transition-delay//告訴系統延遲多少秒才執行過渡效果

transition-timing-function://告訴系統在執行時的速度，見下圖

過渡模組的連寫：

transition:過渡屬性 過渡時長 運動速度 延遲時間；

過渡連寫的注意點：

1.和分開寫一樣，如果想給多個屬性新增過渡效果新增逗號即可。

2.連寫的時候，可以省略後面的兩個引數，只要滿足了前面2個引數，就一定會有過渡效果。

transition:all 5s;//所有的屬性都要有過渡效果。

過渡模組--彈性效果

編寫過渡的套路

1.不要管過渡，先編寫基本頁面

2.修改我們認為需要修改的屬性

3.再回去給被修改屬性的那個元素新增過渡即可

2dtransform

transform:rotate(50deg)

預設情況下所有的元素都是以自己的中心點作為參考來旋轉的，我們可以通過形變中心點屬性來修改它的參考點。

transform-origin：200px,0px;

第乙個引數：水平方向

第二個引數：垂直方向

注意點：

取值有三種形式：具體畫素，百分比，特殊關鍵字

transform:rotatez(45deg);//預設情況下所有元素都是圍繞著z軸進行旋轉

transform:rotatex(45deg);//圍繞x旋轉

總結：想圍繞哪個軸轉，只需要在rotate加上哪個軸即可

perspective：500px；//1.透視：近大遠小  2.一定要注意，透視屬性必須新增到需要呈現近大遠小效果的元素的父元素上面

transform：scale(1.5);//放大1.5倍

如何給盒子新增陰影

box-shadow：水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影；

//盒子的陰影分為內外陰影，預設情況下就是外陰影

//快速新增陰影只需要編寫三個引數即可

box-shadow：水平偏移 垂直偏移 模糊度；

//預設情況下陰影的顏色和盒子內容的顏色一致

如何給文字新增陰影

text-shadow：水平偏移 垂直偏移 模糊度 陰影顏色；

動畫：過渡和動畫的異同：

1.不同點

過渡必須人為的觸發才會執行動畫

動畫不需要人為的觸發就看看執行動畫

2.相同點

過渡和動畫都是用來給元素新增動畫

過渡和動畫都是系統新增的屬性

過渡和動畫都需要滿足三要素才會有動畫效果

動畫

translatez(200px);//向外移動200px

//1.動畫中如果有和預設樣式同名的屬性，會覆蓋預設樣式中同名的屬性

//2.在編寫動畫的時候，固定不變的值寫在前面，需要變化的值寫在後面

背景相關

//背景尺寸屬性是css3中新增的乙個屬性，專門用於設定大小

background-size：200px 100px;//第乙個引數是寬度，第二個是高度

css頁面特效 2D 3D轉換 過渡 動畫

1 2d 3d轉換 通過除css3轉換，能夠對元素進行移動 縮放 轉位 拉長或伸縮等。轉換是使元素改變形狀 尺寸和位置的一種效果。可以使用2d 3d來轉換元素。2d轉換方法 translate 移動 rotate 旋轉 scale 縮放 skew 傾斜 3d轉換方法 rotatex rotatey ...

css動畫2D 3D的轉換

可以使用2d,3d來轉換元素 translate 使元素移動 有兩個引數，x和y，x表示水平方向的移動，y表示垂直方向的移動 例如 transfrom translate 100px,100px 例子 transfrom rotate 180deg deg 是乙個度數單位必須寫的 例子 transf...

css3新特性 過渡 動畫

目的是讓一些互動效果 主要是hover動畫 變得生動一些，不會顯得那麼生硬。css3 過渡是元素從一種樣式逐漸改變為另一種的效果，必須規定兩項內容 指定要新增效果的css屬性 持續時間。transition是以下四個屬性的簡寫 當需要同時給兩種css屬性新增過渡時，用逗號隔開 transition ...