css3
動畫效果?
1.變形轉(zhuǎn)換 transform
變形中心點 transform-origin 兩個數(shù)字確定中心點
//transition: all 1s;//補間動畫 all所有類型 1s變形時間
transition-property: width;//應(yīng)用過渡的屬性
transition-duration: 2s;//過渡持續(xù)時間
transition-delay: 1s;//過渡效果推遲時間
transition-timing-function: cubic-bezie;//過渡的效果
2d轉(zhuǎn)換
（1）移動translate（x，y） x水平方向 y豎直方向
（2）旋轉(zhuǎn)rotate（40deg）：正數(shù)表示順時針旋轉(zhuǎn) 相反為逆時針
（3）縮放scale（x，y）水平·豎直方向縮放倍數(shù)
（4）傾斜 skew（deg油啤，deg）元素按一定角度傾斜
3d轉(zhuǎn)換
（1）旋轉(zhuǎn) rotateX（deg）rotateY（deg）rotateZ（deg）
（2）移動 translateX（）translateY（）translateZ（）
translate3d（x隘梨，y顶瞳，z）xy可以是像素或百分比 z只能是像素
視距:眼睛到電腦屏幕距離 越近越明顯3d 加在旋轉(zhuǎn)元素的父級上
2.過渡變化（translation）
3.動畫
在運動對象內(nèi)
animation：動畫名 時間 運動曲線 延遲時間 infinite（播放次數(shù)）? alternate（是否反方向運動）
@keyframes 動畫名{
from{}//起始位置
to{}//終止位置
0%{}
50%{}
100%{}
}
偽類選擇器
.door1::before,.door2::before{
/*偽元素 插入一個元素標(biāo)簽*/
content: "";
z-index: 1;/*z軸的值 越大越優(yōu)先級*/在幾張圖片疊在一起時可能使用
