transition :all is ease - in . 開始的時候慢促煮,越來越快,然后停止戈钢;
transition : all is ease - out . 開始時快,越來越慢恩溅,然后停止;
transition : al is ease-in -out .開始和結(jié)束時慢速。。瀑志。。
如果子元素超出父元素時 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明战得;
line-height 行高漂佩;margin : 20px,間距20px,info信息
tansfrom 變形
1.位移 夏醉, 2.縮放 , 3.旋轉(zhuǎn) 涌韩, 4.斜切 畔柔,
1.位移 transition(50px,50px) 水平和垂直臣樱;
是不會影響文檔流的 靶擦,自己動 不會影響下邊的;
2.旋轉(zhuǎn) transition:rotate(30deg)沿著z 軸旋轉(zhuǎn) 雇毫;
3.縮放 transitiion :scale(0.5,0.2) 寬度 高度玄捕;
4.斜切 transition : skew(0,45deg ) x軸不動,y軸斜切45度棚放;水平和垂直枚粘;
margin : 50px(上邊距) auto 0;
元素旋轉(zhuǎn)
transfrom : rotate(45deg) 默認(rèn)是沿著z軸旋轉(zhuǎn);
transfrom : perspective(800px ) rotate(45deg)
perspective 設(shè)置透視距離飘蚯,經(jīng)驗數(shù) 800px 馍迄,比較符合人眼的透視距離;
transfrom -style : perseve-3d ,設(shè)置盒子按3d空間顯示局骤;
變形中間點
div : nthchild{} ;第幾個孩子攀圈;
transfrom-origin:left center, 設(shè)置變形的中心點 (左中);
transfrom-origin:left top,設(shè)置變形的中心點 (左上)峦甩;
背面可見
margin : 上赘来,右,下凯傲,左犬辰,
如果不想變的話 加過度 transfom:all 500ms ease;
800是經(jīng)驗值 起始角度 rotatey (0deg);
有透視效果 transfrom -style : preserve -3d;
設(shè)置盒子背面是否可見
backface - visibity : hidden; 背面不可見 (隱藏不可見);
圖片翻面時另一張圖片
animation 動畫
多個設(shè)置用空格隔開泣洞;
animation : moving 1s ease(運(yùn)動曲線) 1s(延遲) 5(動的次數(shù) ) alternat(是否返回)
alternate 設(shè)置是否返回忧风;
infinite 不限次數(shù);
動畫運(yùn)歲動的狀態(tài) : 暫停 animation-play-state : paused;
動畫運(yùn)動的狀態(tài) : 運(yùn)行 animation-play-state : running;
forwards 動畫結(jié)束最后狀態(tài)球凰;
both 都 起始和結(jié)束都設(shè)置狮腿;
@keyframes 創(chuàng)建關(guān)鍵動畫時;聲明一個動畫呕诉,給他后面隨便起一個名字缘厢;
動畫一個狀態(tài)到另一個狀態(tài);
隱藏 overflow : hidden;
相對定位 :position : relative;
絕對定位 : positiion : absolute;
動畫定義的關(guān)鍵字:
@keyframes 名字{ 起始狀態(tài) from [ left 0px]
終止?fàn)顟B(tài) to [ left 0px,]}
from 開始 甩挫,to 結(jié)束贴硫;
循環(huán)一直走 :infinte ;
transfrom : scaley;
多幀動畫
位移動畫 transfrom : tanslateY(Y軸) 10px;
圓角 border - ralios : 50px;
原路返回 : alternate;
縮放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X軸) 13px(Y軸)12px(羽化) 14px(擴(kuò)展) pink(顏色);
box-shadow : 180px(水平偏移) 20px(垂直) 17px(羽化) 0px(擴(kuò)展) pink(顏色) inset;
寫上inset 是內(nèi)部陰影伊者,不寫是外部陰影英遭。