CSS3學習手冊（續）

keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以「@keyframes」開頭，後面緊跟著是動畫名稱加上一對花括號「」，括號中就是一些不同時間段樣式規則。

在乙個「@keyframes」中的樣式規則可以由多個百分比構成的，如在「0%」到「100%」之間建立更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果

如：

@-webkit-keyframes changecolor

20%40%

60%80%

100%

}animation-name屬性主要是用來呼叫 @keyframes 定義好的動畫。需要特別注意: animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。

語法：animation-name: none | ident[,none|dent]*;

1、ident是由 @keyframes 建立的動畫名，上面已經講過了（animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致）；

2、none為預設值，當值為 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。

注意：需要在 chrome 和 safari 上面的基礎上加上-webkit-字首，firefox加上-moz-。

語法規則

animation-duration: time

time為非負數

語法：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

主要具有四個屬性值：none、forwards、backwords和both

none:預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處

forwards:表示動畫在結束後繼續應用最後的關鍵幀的位置

backwards:會在向元素應用動畫樣式時迅速應用動畫的初始幀

both:元素動畫同時具有forwards和backwards效果

為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）

舉例：要顯示2欄顯示，每欄寬度為200px，**為：

columns: 200px 2;

設定列寬column-width:auto | ;

設定列數column-count：auto | ;

設定列間距column-gap: normal || ; normal為預設，1em

column-rule:||

邊框寬度column-rule-width:可使用任意正浮點值，也可用medium,thick,thin

邊框樣式column-rule-style：預設為none,可用hidden、dotted、dashed、solid、double、groove、ridge、inset、outset

邊框顏色column-rule-color：預設為前景色，也可設定為transparent(透明色)

跨列設定column-span:none | all;來定義乙個分列元素中的子元素能跨列多少

box-sizing:content-box | border-box | inherit

content-box:預設值，其讓元素維持w3c的標準盒模型，也就是說元素的寬度和高度（width/height）等於元素邊框寬度（border）加上元素內距（padding）加上元素內容寬度或高度（content width/ height）

border-box:重新定義css2.1中盒模型組成的模式，讓元素維持ie傳統的盒模型（ie6以下版本和ie6-7怪異模式），也就是說元素的寬度或高度等於元素內容的寬度或高度。

inherit:使元素繼承父元素的盒模型模式

建立乙個flex容器:

.flexcontainer

flex專案顯示(列/行顯示):flex專案是flex容器的子元素。

flex-direction:column|row;

元素以行/列排列，其預設值是row。

flex專案移動 align-items控制左右，justify-content控制上下

(-webkit-)align-items:flex-start|flex-end|center;/*左邊|右邊|居中*/
(-webkit-)justify-content:flex—start|flex-end|center;/*上|下|居中*/

flex專案自動伸縮：在每個flex專案中的flex屬性設定需要伸縮的值

CSS3學習手冊（續）

CSS3入門學習之屬性大全手冊

css3學習筆記

CSS3學習筆記

CSS3學習手冊（續）

CSS3入門學習之屬性大全手冊

css3學習筆記

CSS3學習筆記

相關推薦