1.transition 過渡
先做好基本的布局击困，修改要變化的屬性再添加過渡吮蛹，一般發(fā)生hover的時(shí)候執(zhí)行過渡方妖。
三要素 ：有屬性發(fā)生改變狭魂，添加需要過渡的屬性，過渡時(shí)間
transition-property: margin-left;添加屬性
transition-druation;xs過渡時(shí)間
transition-timing-function:過渡曲線 linear：ease,ease-in,ease-out,ease-in-out;
連寫：transition: property duration timing-function delay;
transition：all 0s 常用
2.動(dòng)畫
三步走:
animation-name? 自定義名字
animation-duration? 持續(xù)時(shí)間
@keyframes jh{
form{}
to{}
40%{} 50%{}10%;\
} 定義動(dòng)畫內(nèi)容
animation-fill-mode:forwards/backward/both 改變前的狀態(tài)/改變后的狀態(tài)/結(jié)合
animation-play-state: paused/running; 暫停/開始
連寫： animation：jh 2s linear 0s infiniter normal/alternote;
3.維度
transform：translate（x,y）:控制水平垂直方向的平移量
transform:rotate(x,y,z)控制旋轉(zhuǎn)軸角度党觅，默認(rèn)z軸雌澄，
transform:scale(x,x)控制縮放，x<1.0 縮小? x>1.0放大
3D:
transform-style:flat 默認(rèn)元素 2d
設(shè)置transform-style設(shè)置為preserve-3d,變成3D
制作立方體：
transform: rotate(0deg) translateZ(100px) scaleX(2);
transform: rotateX(90deg) translateZ(100px) scaleX(2);
transform: rotateX(180deg) translateZ(100px) scaleX(2);
transform: rotateY(270deg) translateZ(100px) scale(2);
transform: rotateY(90deg) translateZ(200px);
transform: rotateY(270deg) translateZ(200px);
執(zhí)行動(dòng)畫：
@keyframes{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
立方體 變成長方體 上下 前后 scaleX(2)放大兩倍仔役，左右寬度增加到200.
background 背景
1.background-size
取值:前面寬后面高
background-size:contain;
固定像素: 指定多少就是多少, 例如:background-size:100px 100px;
百分比: 指定多少就是多少, 例如:background-size:50% 20%;
auto: 如果寬度是auto, 那么就等比拉伸寬度. 如果高度是auto,那么久等比拉伸高度
conver: 等比拉伸圖片, 保證圖片的寬度"和"高度都填滿盒子
contain: 等比拉伸圖片, 保證圖片的寬度"或"高度填滿盒子
2.background-origin
圖片裁剪
background-origin:content-box
border-box:? 背景圖片從border開始繪制
padding-box: 背景圖片從padding開始繪制, 默認(rèn)
content-box: 背景圖片從content開始繪制
3.background-clip
背景裁剪 background-clip: content-box;
取值：
border-box: 盒子的所有背景都需要顯示
padding-box: 盒子padding和content的部分背景需要顯示
content-box: 盒子content部分的背景需要顯示
4多背景圖片
background: url("xxx.png") left top no-repeat,
url("xxx.png") right top no-repeat;
background-image: url("xxx.png"),url("xxxx.png");
background-repeat:no-repeat, no-repeat;
background-position: left top, right top;
