08day 2018-07-15

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)部陰影伊者,不寫是外部陰影英遭。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市亦渗,隨后出現(xiàn)的幾起案子挖诸,更是在濱河造成了極大的恐慌,老刑警劉巖法精,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件多律,死亡現(xiàn)場離奇詭異,居然都是意外死亡搂蜓,警方通過查閱死者的電腦和手機(jī)狼荞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帮碰,“玉大人相味,你說我怎么就攤上這事⊙惩欤” “怎么了丰涉?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長此再。 經(jīng)常有香客問我昔搂,道長,這世上最難降的妖魔是什么输拇? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任摘符,我火速辦了婚禮,結(jié)果婚禮上策吠,老公的妹妹穿的比我還像新娘逛裤。我一直安慰自己,他們只是感情好猴抹,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布带族。 她就那樣靜靜地躺著,像睡著了一般蟀给。 火紅的嫁衣襯著肌膚如雪蝙砌。 梳的紋絲不亂的頭發(fā)上阳堕,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天,我揣著相機(jī)與錄音择克,去河邊找鬼恬总。 笑死,一個胖子當(dāng)著我的面吹牛肚邢,可吹牛的內(nèi)容都是我干的壹堰。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼骡湖,長吁一口氣:“原來是場噩夢啊……” “哼贱纠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起响蕴,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤谆焊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后换途,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體懊渡,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年军拟,在試婚紗的時候發(fā)現(xiàn)自己被綠了剃执。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡懈息,死狀恐怖肾档,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辫继,我是刑警寧澤怒见,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站姑宽,受9級特大地震影響遣耍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜炮车,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一舵变、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瘦穆,春花似錦纪隙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至熙兔,卻和暖如春悲伶,著一層夾襖步出監(jiān)牢的瞬間艾恼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工拢切, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蒂萎,地道東北人秆吵。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓淮椰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親纳寂。 傳聞我的和親對象是個殘疾皇子主穗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font毙芜,text-align忽媒,li...
    love2013閱讀 2,317評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font腋粥,text-align晦雨,li...
    wzhiq896閱讀 1,762評論 0 2
  • 看了很多視頻、文章隘冲,最后卻通通忘記了闹瞧,別人的知識依舊是別人的,自己卻什么都沒獲得展辞。此系列文章旨在加深自己的印象奥邮,因...
    DCbryant閱讀 1,868評論 0 4
  • css3過度動畫 css3都有哪些新增的東西 : 過度洽腺,動畫,陰影覆旱,圓角蘸朋; transition : width ...
    2simple閱讀 1,011評論 0 0
  • css3過度動畫css3都有哪些新增的東西 : 過度,動畫扣唱,陰影藕坯,圓角;transition : width (寬...
    恬恬i阿萌妹O_o閱讀 199評論 0 0