# 2D轉(zhuǎn)換模塊 transform(旋轉(zhuǎn)/縮放/平移)
# 形變中心 transform-origin
# 旋轉(zhuǎn)軸向 transform
# 透視 perspective
# 陰影?box-shadow
# opacity屬性(不透明度)
# 動畫模塊 animation
# 動畫模塊-其他屬性
# 動畫模塊-云層動畫
# 3D轉(zhuǎn)換模塊?transform-style: preserve-2d/preserve-3d
infinite 無限的
alternate 往返的
旋轉(zhuǎn):
transform: rotate(10deg)
平移:
transform: translate(X軸px,Y軸px);
縮放:
transform: scale(水平倍數(shù), 垂直倍數(shù));
如果取值為1,代表不變
如果取值大于1就是放大,小于1就是縮小
如果水平方向和垂直方向縮放倍數(shù)一樣,那么可以縮寫為一個參數(shù)
綜合:
transform: 第一個參數(shù) 第二個參數(shù) 第三個參數(shù);
注意點:
1.如果需要進行多個轉(zhuǎn)換,那么用空格隔開
2.如果先旋轉(zhuǎn)再平移,平移方向會變成旋轉(zhuǎn)的那個方向(原因:旋轉(zhuǎn)會改變其原有的坐標(biāo)系)
形變中心transform-origin:
默認(rèn)情況下所有的元素都是以自己的中心點作為參考點來旋轉(zhuǎn)的,我們可以通過形變中心點屬性來修改它的參考點
transform-origin: x,y;
取值有三種形式:
1.具體像素
2.百分比
3.特殊關(guān)鍵詞:center/left/right/top/bottom
旋轉(zhuǎn)軸向transform
transform: rotateZ(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
默認(rèn)情況下,都是圍繞Z軸旋轉(zhuǎn)
想圍繞哪個軸轉(zhuǎn),那就在rotate后面加上大寫的軸名
什么是透視?
近大遠小
perspective: 數(shù)值px;
注意點:
一定要注意,透視屬性必須添加到需要呈現(xiàn)近大遠小效果的元素的父元素上面
如何給盒子添加陰影?
box-shadow:水平偏移px 垂直偏移px 模糊度px 陰影擴展px 陰影顏色 內(nèi)外陰影outset/inset;
注意點:
1.盒子的陰影分為內(nèi)外陰影,默認(rèn)情況下就是外陰影
2.快速添加盒子的陰影最少只需要添加三個參數(shù)即可,水平偏移px 垂直偏移px 模糊度px
3.默認(rèn)情況下盒子的陰影是盒子內(nèi)容的color
如何給文字添加陰影?
text-shadow: 水平偏移,垂直偏移,模糊度,陰影顏色;
注意點:
1.文字陰影陰影顏色默認(rèn)就是黑色
2.默認(rèn)情況下盒子的陰影是盒子內(nèi)容的color
opacity不透明度
0透明~1不透明
1.過渡和動畫之間的異同
1.1不同點
過渡必須認(rèn)為的觸發(fā)才會執(zhí)行過渡
動畫不需要認(rèn)為的觸發(fā)就可以執(zhí)行動畫
1.2相同點
過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統(tǒng)新增的屬性
過渡和動畫都要滿足三要素才會有動畫效果
1.告訴系統(tǒng)需要執(zhí)行哪個動畫
animation-name: lnj;
3.告訴系統(tǒng)執(zhí)行動畫的時間
animation-duration: 5s;
2.告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫
-創(chuàng)建動畫動作的第一種方式:
@keyframes lnj{
from {
margin-left: 0;
}
to {
margin-left: 50px;
}
}
-創(chuàng)建動畫動作的第二種方式
@keyframes lnj{
0% {
margin-left: 0;
}
100% {
margin-left: 50px;
}
}
動畫模塊-其他屬性
animation-delay 規(guī)定動畫何時開始,默認(rèn)為0
animation-timing-function 規(guī)定動畫的速度曲線,默認(rèn)是ease
animation-iteration-count 規(guī)定動畫被播放的次數(shù),默認(rèn)為1
animation-direction 規(guī)定動畫是否需要往返動畫,默認(rèn)是normal
取值:
normal 默認(rèn)取值,執(zhí)行完畢直接從起點開始
alternate 需返動畫,注意:往返算2次,往返往返算4次
animation-play-state 控制動畫運行狀態(tài)
取值:
running 運行
paused 暫停
通過我們的觀察,動畫是有一定的狀態(tài)的
等待狀態(tài)
執(zhí)行狀態(tài)
結(jié)束狀態(tài)
animation-fille-mode 規(guī)定動畫執(zhí)行時間之外的狀態(tài)(指定動畫等待狀態(tài)和結(jié)束狀態(tài)的樣式)
取值:
none 不做任何改變
forwards 讓元素結(jié)束狀態(tài)保持動畫保持最后一幀的樣式
backwards 讓元素等待狀態(tài)的時候顯示動畫第一幀的樣子
both 讓元素等待狀態(tài)顯示動畫第一幀的樣式,讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
動畫模塊連寫格式:
animation: 動畫名稱 動畫時長 動畫運動速度 延遲時間 執(zhí)行次數(shù) 是否需要往返動畫;
動畫模塊連寫格式的簡寫:
animation: 動畫名稱 動畫時長;
什么是2D和3D?
2D就是一個平面,只有寬度和高度,沒有厚度
3D就是一個立體,有寬度和高度,還有厚度
默認(rèn)情況下所有的元素都是呈2D展現(xiàn)的
2.如何讓某個元素呈3D展現(xiàn)
和頭飾一樣,想看到某個元素的3D效果,值需要給他的父元素添加一個transform-style屬性,然后設(shè)置其取值為preserve-3d即可
3D轉(zhuǎn)換模塊
transform-style
取值:
preserve-2d
preserve-3d 3d效果
練習(xí): 3D正方體
練習(xí): 3D長方體
快速創(chuàng)建竅門:
1.正方體transform:scale(水平拉伸,垂直不變)
2.把左右兩邊的面再移動一些
注意點:
缺點是正方體被拉伸,正方體上的子元素也會被拉升
練習(xí):3D播放器(張學(xué)友世界巡回演唱會)
注意點:
1.如果動畫中和默認(rèn)樣式中同名的屬性,會覆蓋默認(rèn)樣式中同名的屬性
2.在編寫動畫的時候,固定不變的值寫在前面,需要變化的值寫在后面
opacity不透明度
0透明~1不透明
特點:子元素也會跟著透明
透明色transparent
border: 2px solid transparent;
animation: move 6s steps(6次數(shù)) 0s infinite;
