CSS的縮放
CSS優化
1、轉換
1、什麽是轉換
轉換即改變元素的一些狀態，大小、位置、形狀
可以是2d轉換，也可以是3d的轉換
2d : 使元素在 x軸和 y軸上發生變化
3d ：2d基礎上增加了 z軸的變化
2、轉換屬性
CSS3轉換屬性:
transform : none / transform-function;
none:不轉換，默認值
transform-function：表示要實現轉換的函數
旋轉：rotate()
位移：translate()
縮放：scale()
傾斜:skew()
transform:rotate(); -- 旋轉操作
3、轉換原點：
轉換原點：即轉換過程中圍繞的中心點。
默認情況下，原點是在整個元素的中間處
更改轉換原點：
transform-origin:
取值 ：
數值 ：以元素左上方的點為(0,0)，再去計算其他點
百分比:
0% , 0% : 左上方的點
50% ， 50% ：元素的中心點
關鍵字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin賦值：
一個值 ：x軸的移動
兩個值 ：x軸和y軸
三個值 ：x軸，y軸，z軸
2、2D轉換 - 位移
位移：位置移動
從當前元素的位置處，移動到指定坐標軸位置處
函數：
translate(x,y)
translate(value);
取值
數值、百分比
去負值
x ：正 向右移動
負 向左移動
y : 正 向下移動
負 向上移動
單方向位移：
translateX(x)
translateY(y)
3、2D轉換 - 縮放
縮放：改變元素大小
函數：scale(value)
scale(x,y)
取值：
默認值 1
縮小：0 - 1 之間的小數
放大：大於1
scaleX(x) : 橫向縮放
scaleY(y) : 縱向縮放
4、2D轉換 - 旋轉
圍繞著指定點，按照指定的角度發生的旋轉
函數：rotate(deg)
取值：deg 為角度 0-360
默認為順時針旋轉
deg取值為負的話，則將逆時針旋轉
5、2D轉換 - 傾斜
函數：skew()
取值 ：為角度
skewX(x)
skewY(y)
6、3D轉換
屬性:
perspective : 設置假定人眼到投影平面的距離
只影響3D元素，不影響2D元素
設置位置：加在父元素上，設置好後，其子元素就可以完成3D的轉換。
1、3d位移
改變元素在z軸上的位置
屬性：transform:
函數：translateZ(z);
translate3d(x,y,z);
2、3d旋轉
屬性：transform
函數：
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值為 1，0，-1
rotate3d(-1,0,1,45deg);
****************************************************
1、過渡
1、什麽是過渡
元素從一個【狀態】到另外一個【狀態】的【平滑變換】【過程】
2、過渡屬性
transition
3、過渡4要素(子屬性)
1、過渡屬性
元素的哪個【狀態】發生變化時要使用過渡的效果
當指定的屬性發生改變時，就會觸發過渡效果
語法：
transition-property:none | all | property
transition-property:background;
transition-property:all;
2、過渡時間
整個過渡效果在多長時間內完成，以 秒(s)或毫秒(ms)為單位
語法：
transition-duration: s|ms;
transition-duration:1s;
註意：
過渡時間默認為 0 ，如果為0時，則沒有過渡的效果產生。
如果想看到過渡效果，則必須設置該屬性。
3、過渡函數
指定時間內(transition-duration)過渡的速度效果。
語法：
transition-timing-function
取值：
ease : 默認值，慢速開始，速度變快，慢速結束
linear:勻速開始到結束
ease-in:慢速開始，加速效果(由慢到快)
ease-out:慢速結束，減速效果(由快到慢)
ease-in-out:以慢速開始和結束，先加速再減速
4、過渡延遲
當過渡操作被激發後，等待多長時間後才開始執行效果
語法：transition-delay
以秒或毫秒作為單位
5、統一設置過渡效果
屬性：
transition:
用於設置四個過渡子屬性
transition:transition-property transition-duration transition-timing-function transition-delay;
transition:prop dura timing delay;
4、觸發過渡
過渡效果由用戶的行為進行觸發(點擊、鼠標懸停)
4、多個過渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
transition-delay:delay1,delay2;
2、動畫
1、什麽是動畫
將元素的多個狀態放在一起進行運行(多個狀態間的轉換)
過渡：實現簡單的動態效果
動畫：實現復雜的動態效果
註意：瀏覽器兼容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
實現動畫的步驟:
1、聲明動畫
@keyframes
聲明整個動畫過程中的不同狀態都是什麽
2、調用動畫
通過 animation 屬性 調用已聲明動畫
2、關鍵幀
語法：@keyframes 規則聲明動畫
<style>
@keyframes 動畫名稱{
/*定義關鍵幀即不同時間點上的動畫狀態*/
from | 0%{
/*動畫的開始狀態(樣式)*/
transform:rotate(0deg)
}
/*...若幹關鍵幀*/
20%{
/*動畫在執行到20%的時候的狀態(樣式)*/
}
25%{
}
26%{
}
to | 100%{
/*動畫結束時候的狀態(樣式)*/
transform:rotate(360deg)
}
}
@-webkit-keyframes changeBack{
}
@-moz-keyframes changeBack{
}
@-o-keyframes changeBack{
}
</style>
定義動畫
@keyframes animate {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
animation:anmiate 5s ease 0s infinite
div:hover {
animation-play-state:paused;
}
3、動畫屬性(調用)
1、animation-name : 調用動畫的名稱，指定 @keyframes 的名字
2、animation-duration:動畫執行的時常以 s或ms
3、animation-timing-function:動畫執行時的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延遲時間，以s或ms為單位
5、animation-iteration-count
動畫執行的次數
取值 ：
1、具體數值
2、infinite : 無限次播放
6、animation-direction : 動畫播放方向
取值：
normal
alternate :
奇數次播放為正向播放(狀態從from - to)
偶數次播放為逆向播放(狀態從to - from)
7、動畫綜合屬性 : animation:mingcheng 2s ease 1s 3
ainimation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
指定動畫在播放之前或之後的效果
none : 默認行為
forwards:動畫完成後，保持最後一個狀態
backwards : 動畫顯示之前，保持在第一個狀態
both:動畫完成後，動畫顯示前，都被相應的狀態所保持著。
9、animation-play-state
定義動畫播放狀態
配合著 Javascript使用，用於播放過程中暫停動畫
取值：
paused ：暫停
running ：播放
事例如下：
效果如下：
CSS的縮放