網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)Web應(yīng)用程序設(shè)計(jì)

1、CSS網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)Web應(yīng)用程序設(shè)計(jì)CSS層疊樣式表CSS樣式表用于設(shè)置HTML和XML的顯示樣式，便于實(shí)現(xiàn)內(nèi)容與樣式的分離CSS樣式有5種定義與引用方式 內(nèi)聯(lián)式：在HTML標(biāo)記中用style屬性定義 內(nèi)嵌式：在head元素中用style元素定義 鏈接式：在head元素中用link標(biāo)記鏈接CSS文件 導(dǎo)入式：在樣式定義中用import指令導(dǎo)入CSS文件（必須在最前） 瀏覽器默認(rèn)層疊 后定義的覆蓋先定義的 作用范圍小的優(yōu)先 內(nèi)層未定義的繼承外層定義的語(yǔ)法格式： 選擇符屬性:屬性值;屬性:屬性值; /*注釋*/例：樣式定義與引用 瀏覽器標(biāo)題 /*導(dǎo)入外部樣式表文件*/ import url(b

2、.css); p color:#FF0000; font-size:28px; style屬性 樣式表 選擇器 標(biāo)記選擇器：標(biāo)記名（所有標(biāo)記：*） ID選擇器：#ID屬性值 類選擇器：.class屬性值 屬性選擇器：屬性 關(guān)系選擇器：選擇器（連接符）選擇器 偽類選擇器：標(biāo)記名:命令 偽對(duì)象選擇器：標(biāo)記名:命令，標(biāo)記名:命令選擇器選擇器選擇器名稱名稱說(shuō)明說(shuō)明*所有標(biāo)記選擇器所有標(biāo)記或元素T標(biāo)記選擇器標(biāo)記名為T的所有標(biāo)記或元素#valID選擇器ID屬性值為val的所有標(biāo)記或元素.valClass選擇器Class屬性值為val的所有標(biāo)記或元素att屬性選擇器屬性符合att描述的所有標(biāo)記或元素EoF關(guān)

3、系選擇器選擇器E和F符合o描述的關(guān)系E:F偽類選擇器選擇器E的預(yù)定義功能FE:F偽對(duì)象選擇器選擇器E的預(yù)定義功能F關(guān)系選擇器選擇器選擇器名稱名稱說(shuō)明說(shuō)明E,F并選擇器E或FEF交選擇器E且FE F 子孫選擇器所有被E包含的FEF子選擇器所有作為E直接包含的FE+F相鄰選擇器緊貼在E之后的FEF兄弟選擇器E之后的所有兄弟F屬性選擇器選擇器選擇器說(shuō)明說(shuō)明att選擇具有att屬性的標(biāo)記或元素att=val選擇具有att屬性且屬性值等于val的標(biāo)記或元素att=val選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于val的標(biāo)記或元素att=val 選擇具有att屬性且屬性值為以val開(kāi)

4、頭的字符串的標(biāo)記或元素att$=val 選擇具有att屬性且屬性值為以val結(jié)尾的字符串的標(biāo)記或元素att*=val 選擇具有att屬性且屬性值為包含val的字符串的標(biāo)記或元素att|=val選擇具有att屬性且屬性值為以val開(kāi)頭并用連接符-分隔的字符串的標(biāo)記或元素偽類選擇器（1/2）選擇符說(shuō)明E:link 設(shè)置超鏈接a在未被訪問(wèn)前的樣式。E:visited設(shè)置超鏈接a在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式。E:hover設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。E:active設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。E:focus設(shè)置元素在成為輸入焦點(diǎn)（該元素的onfocus事件發(fā)生）

5、時(shí)的樣式。E:lang()匹配使用特殊語(yǔ)言的E元素。E:not()匹配不含有s選擇符的元素E。E:root匹配E元素在文檔的根元素。E:first-child 匹配父元素的第一個(gè)子元素E。E:last-child匹配父元素的最后一個(gè)子元素E。E:only-child匹配父元素僅有的一個(gè)子元素E。E:nth-child(n)匹配父元素的第n個(gè)子元素E。E:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素E。偽類選擇器（2/2）選擇符說(shuō)明E:first-of-type匹配同類型中的第一個(gè)同級(jí)兄弟元素E。E:last-of-type 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E。E:only-

6、of-type匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E。E:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素E。E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E。E:empty匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素E。E:checked匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時(shí))E:enabled匹配用戶界面上處于可用狀態(tài)的元素E。E:disabled匹配用戶界面上處于禁用狀態(tài)的元素E。E:target匹配相關(guān)URL指向的E元素。page:first設(shè)置頁(yè)面容器第一頁(yè)使用的樣式。僅用于page

7、規(guī)則page:left設(shè)置頁(yè)面容器位于裝訂線左邊的所有頁(yè)面使用的樣式。僅用于page規(guī)則page:right設(shè)置頁(yè)面容器位于裝訂線右邊的所有頁(yè)面使用的樣式。僅用于page規(guī)則偽對(duì)象選擇器選擇符簡(jiǎn)介E:first-letter/E:first-letter 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式。E:first-line/E:first-line設(shè)置對(duì)象內(nèi)的第一行的樣式。E:before/E:before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用E:after/E:after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用E:selec

8、tion設(shè)置對(duì)象被選擇時(shí)的顏色。例：選擇器 pcolor:#FF0000;/*標(biāo)記*/ #acolor:#00FF00;/*id*/ .acolor:#0000FF;/*class*/ acolor:#000000;/*屬性*/ pabcolor:#007777;/*多屬性*/ p aacolor:#00FFFF;/*嵌套*/ paacolor:#ffff00;/*直接嵌套*/ p bb,cccolor:#888888;/*多項(xiàng)*/ 標(biāo)記 id class 屬性 多屬性 直接嵌套嵌套 多項(xiàng) 多項(xiàng) chromeIE9例：關(guān)系選擇器 a,bcolor:#f00;/*并選擇器,#f00等同于#ff0

9、000*/ abcolor:#ff0;/*交選擇器*/ p Ecolor:#0f0;/*子孫選擇器*/ pEcolor:#0ff;/*子選擇器*/ F+pcolor:#00f;/*相鄰選擇器*/ Gpcolor:#f0f;/*兄弟選擇器*/ 并選擇 并選擇 交選擇 子選擇子孫選擇 相鄰選擇非相鄰 兄弟選擇兄弟選擇 chromeIE9例：屬性選擇器 acolor:#000000;/*屬性*/ abcolor:#007777;/*多屬性*/ pa=acolor:#aa0000;/*屬性值，注意無(wú)空格，否則變嵌套*/ pa=bccolor:#770000;/*屬性值包含單詞*/ pa|=abcolo

10、r:#00aa00;/*屬性值包含前綴*/ pa=abccolor:#0000aa;/*屬性值開(kāi)頭*/ pa$=cdcolor:#000077;/*屬性值結(jié)尾*/ pa*=bdcolor:#777700;/*屬性值包含*/ 屬性 多屬性 屬性值 屬性值包含單詞 屬性值包含單詞 屬性值包含前綴(后無(wú)字符) 屬性值包含前綴(后接減號(hào)) 屬性值開(kāi)頭 屬性值結(jié)尾 屬性值包含 樣式屬性定位 布局 彈性盒模型 尺寸 外補(bǔ)白內(nèi)補(bǔ)白邊框 背景顏色 字體文本列表表格內(nèi)容用戶界面 多列 轉(zhuǎn)換 過(guò)渡 動(dòng)畫 打印媒體查詢樣式屬性-定位定位屬性簡(jiǎn)介position 對(duì)象的定位方式（只讀）z-index對(duì)象的層疊順序to

11、p對(duì)象與其父對(duì)象頂部距離right對(duì)象與其父對(duì)象右邊距離bottom對(duì)象與其父對(duì)象底邊距離left對(duì)象與其父對(duì)象左邊距離樣式屬性-布局布局屬性簡(jiǎn)介display對(duì)象是否及如何顯示float該屬性的值指出了對(duì)象是否及如何浮動(dòng)。請(qǐng)參閱clear屬性clear該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊。請(qǐng)參閱float屬性visibility是否顯示對(duì)象。與display屬性不同，此屬性為隱藏的對(duì)象保留其占據(jù)的物理空間clip對(duì)象的可視區(qū)域。區(qū)域外的部分是透明的overflow 當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度及寬度時(shí)如何管理內(nèi)容overflow-x 當(dāng)對(duì)象的內(nèi)容超過(guò)其指定寬度時(shí)如何管理內(nèi)容overflow-y

12、 當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度時(shí)如何管理內(nèi)容樣式屬性-彈性盒模型彈性盒模型屬性簡(jiǎn)介box-orient彈性盒模型對(duì)象的子元素的排列方式。box-pack彈性盒模型對(duì)象的子元素的對(duì)齊方式。請(qǐng)參閱box-align兄弟屬性box-align彈性盒模型對(duì)象的子元素的對(duì)齊方式。請(qǐng)參閱box-pack兄弟屬性box-flex彈性盒模型對(duì)象的子元素如何分配其剩余空間。box-flex-group彈性盒模型對(duì)象的子元素的所屬組。box-ordinal-group 彈性盒模型對(duì)象的子元素的顯示順序。box-direction彈性盒模型對(duì)象的子元素的排列順序是否反轉(zhuǎn)。box-lines彈性盒模型對(duì)象的子元素是否可

13、以換行顯示。樣式屬性-尺寸尺寸屬性簡(jiǎn)介width對(duì)象的寬度min-width對(duì)象的最小寬度max-width對(duì)象的最大寬度height對(duì)象的高度min-height對(duì)象的最小高度max-height 對(duì)象的最大高度樣式屬性-外補(bǔ)白外補(bǔ)白屬性簡(jiǎn)介margin 對(duì)象四邊的外延邊距margin-top對(duì)象頂邊的外延邊距margin-right對(duì)象右邊的外延邊距margin-bottom 對(duì)象底邊的外延邊距margin-left對(duì)象左邊的外延邊距樣式屬性-內(nèi)補(bǔ)白內(nèi)補(bǔ)白屬性簡(jiǎn)介padding 對(duì)象四邊的內(nèi)部邊距padding-top對(duì)象頂邊的內(nèi)部邊距padding-right對(duì)象右邊的內(nèi)部邊距paddi

14、ng-bottom對(duì)象底邊的內(nèi)部邊距padding-left對(duì)象左邊的內(nèi)部邊距樣式屬性-邊框邊框?qū)傩院?jiǎn)介border 復(fù)合屬性。設(shè)置對(duì)象邊框的特性border-width對(duì)象邊框?qū)挾萣order-style對(duì)象邊框樣式border-color對(duì)象邊框顏色border-top復(fù)合屬性。設(shè)置對(duì)象頂邊的特性border-top-width對(duì)象頂邊寬度border-top-style對(duì)象頂邊樣式border-top-color對(duì)象頂邊顏色border-right復(fù)合屬性。設(shè)置對(duì)象右邊的特性border-right-width對(duì)象右邊寬度border-right-style對(duì)象右邊樣式border-ri

15、ght-color對(duì)象右邊顏色border-bottom復(fù)合屬性。設(shè)置對(duì)象底邊的特性border-bottom-width 對(duì)象底邊寬度屬性簡(jiǎn)介border-bottom-style對(duì)象底邊樣式border-bottom-color對(duì)象底邊顏色border-left復(fù)合屬性。置對(duì)象左邊的特性border-left-width對(duì)象左邊寬度border-left-style對(duì)象左邊樣式border-left-color對(duì)象左邊顏色border-image對(duì)象的邊框使用圖像來(lái)填充border-radius對(duì)象使用圓角邊框border-top-left-radius對(duì)象左上角圓角邊框border-to

16、p-right-radius 對(duì)象右上角圓角邊框border-bottom-right-radius對(duì)象右下角圓角邊框border-bottom-left-radius對(duì)象左下角圓角邊框box-shadow對(duì)象陰影box-reflect對(duì)象的倒影樣式屬性-色彩色彩屬性簡(jiǎn)介color對(duì)象的顏色。請(qǐng)參閱顏色值opacity對(duì)象的不透明度。樣式屬性值-色彩值色彩值屬性簡(jiǎn)介Color Name 用顏色名稱來(lái)指定顏色。包括基本顏色關(guān)鍵字、系統(tǒng)顏色、SVG顏色關(guān)鍵字等HEX十六進(jìn)制記法。語(yǔ)法如：#rrggbb或#rgbRGBrgb記法。語(yǔ)法如：rgb(255,0,0)RGBArgba記法HSLhsl記法H

17、SLAhsla記法transparent全透明16個(gè)基本顏色關(guān)鍵字個(gè)基本顏色關(guān)鍵字ColorColor NameHEXRGBblack#0000000,0,0silver#C0C0C0192,192,192gray#808080128,128,128white#FFFFFF255,255,255maroon#800000128,0,0red#FF0000255,0,0purple#800080128,0,128fuchsia#FF00FF255,0,255green#0080000,128,0lime#00FF000,255,0olive#808000128,128,0yellow#FFFF0

18、0255,255,0navy#0000800,0,128blue#0000FF0,0,255teal#0080800,128,128aqua#00FFFF0,255,255樣式屬性-字體字體屬性簡(jiǎn)介font 復(fù)合屬性。對(duì)象中的文本特性font-style對(duì)象中的字體樣式font-variant 對(duì)象中的文本是否為小型的大寫字母font-weight 對(duì)象中的文本字體的粗細(xì)font-size對(duì)象中的字體尺寸font-family 用于對(duì)象中文本的字體名稱序列font-stretch 對(duì)象中的文字是否橫向拉伸變形樣式屬性-文本文本屬性簡(jiǎn)介text-indent對(duì)象中的文本的縮進(jìn)text-overf

19、low是否使用一個(gè)省略標(biāo)記（.）標(biāo)示對(duì)象內(nèi)文本的溢出text-align對(duì)象中文本的對(duì)齊方式text-transform對(duì)象中的文本的大小寫text-decoration復(fù)合屬性。對(duì)象中的文本的裝飾，如下劃線、閃爍等text-decoration-line對(duì)象中的文本裝飾線條的位置。text-decoration-color對(duì)象中的文本裝飾線條的顏色。text-decoration-style對(duì)象中的文本裝飾線條的形狀。text-shadow對(duì)象中文本的文字是否有陰影及模糊效果text-fill-color對(duì)象中的文字填充顏色text-stroke復(fù)合屬性。對(duì)象中的文字的描邊屬性簡(jiǎn)介text-

20、stroke-width 對(duì)象中的文字的描邊厚度text-stroke-color 對(duì)象中的文字的描邊顏色letter-spacing對(duì)象中的文字之間的間隔word-spacing對(duì)象中的單詞之間插入的空格數(shù)。vertical-align對(duì)象內(nèi)容的垂直對(duì)其方式word-wrap當(dāng)當(dāng)前行超過(guò)指定容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行white-space對(duì)象內(nèi)空格的處理方式direction文本流的方向unicode-bidi用于同一個(gè)頁(yè)面里存在從不同方向讀進(jìn)的文本顯示。與direction屬性一起使用line-height對(duì)象的行高。即字體最底端與字體內(nèi)部頂端之間的距離tab-size對(duì)象中的制表符的長(zhǎng)度樣

21、式屬性-列表列表屬性簡(jiǎn)介list-style 復(fù)合屬性。設(shè)置列表項(xiàng)目相關(guān)內(nèi)容list-style-image作為對(duì)象的列表項(xiàng)標(biāo)記的圖像list-style-position作為對(duì)象的列表項(xiàng)標(biāo)記如何根據(jù)文本排列l(wèi)ist-style-type對(duì)象的列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記樣式屬性-表格表格屬性簡(jiǎn)介table-layout 表格的布局算法border-collapse表格的行和單元格的邊是合并在一起還是按照標(biāo)準(zhǔn)的HTML樣式分開(kāi)border-spacing當(dāng)表格邊框獨(dú)立時(shí)，行和單元格的邊框在橫向和縱向上的間距caption-side表格的caption對(duì)象是在表格的那一邊empty-cells當(dāng)表格的

22、單元格無(wú)內(nèi)容時(shí)，是否顯示該單元格的邊框樣式屬性-內(nèi)容內(nèi)容屬性簡(jiǎn)介content 用來(lái)和:after及:before偽元素一起使用，在對(duì)象前或后顯示內(nèi)容counter-increment設(shè)定當(dāng)一個(gè)selector發(fā)生時(shí)計(jì)數(shù)器增加的值counter-reset將指定selector的計(jì)數(shù)器復(fù)位quotes對(duì)象內(nèi)使用的嵌套標(biāo)記樣式屬性-多列多列屬性簡(jiǎn)介outline 復(fù)合屬性。對(duì)象外的線條輪廓outline-width對(duì)象外的線條輪廓的寬度outline-style對(duì)象外的線條輪廓的樣式outline-color對(duì)象外的線條輪廓的顏色outline-offset對(duì)象外的線條輪廓偏移位置的數(shù)值nav-

23、index對(duì)象的導(dǎo)航順序。nav-up對(duì)象的導(dǎo)航方向。nav-right對(duì)象的導(dǎo)航方向。屬性簡(jiǎn)介nav-down 對(duì)象的導(dǎo)航方向。nav-left對(duì)象的導(dǎo)航方向。cursor在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。zoom對(duì)象的縮放比例。box-sizing 對(duì)象的盒模型組成模式。resize對(duì)象的區(qū)域是否允許用戶縮放，調(diào)節(jié)元素尺寸大小。ime-mode是否允許用戶激活輸入中文，韓文，日文等的輸入法（IME）狀態(tài)。樣式屬性-用戶界面用戶界面屬性簡(jiǎn)介columns 對(duì)象的列數(shù)和每列的寬度。復(fù)合屬性column-width 對(duì)象每列的寬度column-count 對(duì)象的列數(shù)column

24、-gap 對(duì)象的列與列之間的間隙column-rule 對(duì)象的列與列之間的邊框。復(fù)合屬性column-rule-width 對(duì)象的列與列之間的邊框厚度屬性簡(jiǎn)介column-rule-style 對(duì)象的列與列之間的邊框樣式column-rule-color 對(duì)象的列與列之間的邊框顏色column-span 對(duì)象元素是否橫跨所有列column-fill 對(duì)象所有列的高度是否統(tǒng)一column-break-before 對(duì)象之前是否斷行column-break-after 對(duì)象之前是否斷行column-break-inside 對(duì)象內(nèi)部是否斷行樣式屬性-2D變換變換屬性簡(jiǎn)介transform 對(duì)象的變

25、換transform-origin 對(duì)象中的變換所參照的原點(diǎn)樣式屬性-過(guò)渡過(guò)渡屬性簡(jiǎn)介transition 復(fù)合屬性。對(duì)象變換時(shí)的過(guò)渡效果transition-property對(duì)象中的參與過(guò)渡的屬性transition-duration對(duì)象過(guò)渡的持續(xù)時(shí)間transition-timing-function對(duì)象中過(guò)渡的類型transition-delay對(duì)象延遲過(guò)渡的時(shí)間樣式屬性-動(dòng)畫動(dòng)畫屬性簡(jiǎn)介animation 復(fù)合屬性。置對(duì)象所應(yīng)用的動(dòng)畫特效animation-name對(duì)象所應(yīng)用的動(dòng)畫名稱animation-duration對(duì)象動(dòng)畫的持續(xù)時(shí)間animation-timing-functio

26、n對(duì)象動(dòng)畫的過(guò)渡類型animation-delay對(duì)象動(dòng)畫延遲的時(shí)間animation-iteration-count對(duì)象動(dòng)畫的循環(huán)次數(shù)animation-direction對(duì)象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)animation-play-state對(duì)象動(dòng)畫的狀態(tài)animation-fill-mode對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)樣式屬性-打印打印屬性簡(jiǎn)介page 顯示對(duì)象容器時(shí)使用的頁(yè)面類型page-break-before 對(duì)象之前出現(xiàn)的頁(yè)分割符page-break-after對(duì)象之后出現(xiàn)的頁(yè)分割符page-break-inside對(duì)象容器內(nèi)部出現(xiàn)的頁(yè)分割符樣式屬性-媒體特性媒體特性屬性簡(jiǎn)介width定義

27、輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾萮eight定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度device-width定義輸出設(shè)備的屏幕可見(jiàn)寬度device-height定義輸出設(shè)備的屏幕可見(jiàn)高度orientation定義height是否大于或等于width。值portrait代表是，landscape代表否aspect-ratio定義width與height的比率device-aspect-ratio定義device-width與device-height的比率。如常見(jiàn)的顯示器比率：4/3, 16/9, 16/10屬性簡(jiǎn)介color定義每一組輸出設(shè)備的彩色原件個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0color-inde

28、x定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒(méi)有使用彩色查詢表，則值等于0monochrome定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0resolution定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcmscan定義電視類設(shè)備的掃描工序grid用來(lái)查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。只有1和0才是有效值，1代表是，0代表否CSS應(yīng)用實(shí)例（需Chrome）h1font-size:16px;poverflow:hidden;height:1px;margin:302px 0 0;background:#ddd;divwidth:100px;hei

29、ght:100px;padding:10px;border-radius:61px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);

30、background:linear-gradient(top,#fff,#F6D66E);-moz-transform:translate(280px,300px);-webkit-transform:translate(280px,300px);-o-transform:translate(280px,300px);-ms-transform:translate(280px,300px);transform:translate(280px,300px);-moz-animation:animations 6s linear;-webkit-animation:animations 6s li

31、near;-o-animation:animations 1.5s linear-ms-animation:animations 1.5s linear;animation:animations 1.5s linear;div:hover-moz-animation-play-state:paused;-webkit-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;-webkit-keyframes ani

32、mations0%-webkit-transform:translate(0,0);10%-webkit-transform:translate(0,300px);20%-webkit-transform:translate(60px,60px);30%-webkit-transform:translate(60px,300px);40%-webkit-transform:translate(120px,120px);50%-webkit-transform:translate(120px,300px);60%-webkit-transform:translate(180px,180px);7

33、0%-webkit-transform:translate(180px,300px);80%-webkit-transform:translate(240px,240px);90%-webkit-transform:translate(240px,300px);100%-webkit-transform:translate(280px,300px);-moz-keyframes animations0%-moz-transform:translate(0,0);10%-moz-transform:translate(0,300px);20%-moz-transform:translate(60

34、px,60px);30%-moz-transform:translate(60px,300px);40%-moz-transform:translate(120px,120px);50%-moz-transform:translate(120px,300px);60%-moz-transform:translate(180px,180px);70%-moz-transform:translate(180px,300px);80%-moz-transform:translate(240px,240px);90%-moz-transform:translate(240px,300px);100%-

35、moz-transform:translate(280px,300px);-o-keyframes animations0%-o-transform:translate(0,0);10%-o-transform:translate(0,300px);20%-o-transform:translate(60px,60px);30%-o-transform:translate(60px,300px);40%-o-transform:translate(120px,120px);50%-o-transform:translate(120px,300px);60%-o-transform:transl

36、ate(180px,180px);70%-o-transform:translate(180px,300px);80%-o-transform:translate(240px,240px);90%-o-transform:translate(240px,300px);100%-o-transform:translate(280px,300px);-ms-keyframes animations0%-ms-transform:translate(0,0);10%-ms-transform:translate(0,300px);20%-ms-transform:translate(60px,60px);30%-ms-transform:translate(60px,300px);40%-ms-transform:translate(120px,120px);50%-ms-transform:translate(120px,300px);60%-ms-transform:translate(180px,180px);70%-ms-transfo