CSS3學習手記

--------------------CSS3新增選擇器--------------------

#E:nth-child(n)：比對元素類型為E且是父元素的第n個子元素

#E:nth-last-child(n)：比對元素類型為E且是父元素的倒數第n個子元素（與上一項順序相反）

#E:first-child：比對元素類型為E且是父元素的第一個子元素

#E:last-child：比對元素類型為E且是父元素的最後一個子元素

#E:only-child：比對元素類型為E且是父元素中唯一的子元素

#E:nth-of-type(n)：比對父元素的第n個類型為E的子元素

#E:nth-last-of-type(n)：比對父元素的倒數第n個類型為E的子元素（與上一項順序相反）

#E:first-of-type：比對父元素的第一個類型為E的子元素

#E:last-of-type：比對父元素的最後一個類型為E的子元素

#E:only-of-type：比對父元素中唯一子元素是E的子元素

#E:empty 選擇一個空的元素

#E:enabled 可用的表單控件

#E:disabled 失效的表單控件

#E:checked 選中的checkbox

#E:not(s) 不包含某元素

#E:target 對應錨點的樣式

#E > F E元素下面第一層子集

#E ~ F E元素後面的兄弟元素

#E + F 緊挨着的兄弟元素

＃屬性選擇器：

　　1，E [data-attr]含有data-attr屬性的元素

　　2，E [data-attr ='ok']含有data-attr屬性的元素且它的值為“ok”

　　3，E [data-attr ^ ='ok']含有data-attr屬性的元素且它的值的開頭含有“ok”

　　4，E [data-attr $ ='ok']含有data-attr屬性的元素且它的值的結尾含有“ok”

　　5，E [data-attr * ='ok']含有data-attr屬性的元素且它的值中含有“ok”

-------------------- CSS3圓角，陰影，rgba --------------------

＃CSS3圓角：

　　1，設定某個角的圓角，比如設定左上角的圓角：border-top-left-radius：30px 60px; 　　2，同時分别設定四個角：border-radius：30px 60px 120px 150px; 　　3，設定四個圓角相同：border-radius：50％; ＃CSS3陰影：

box-shadow：h-shadow v-shadow blur spread inset;分别設定陰影：水準偏移垂直偏移羽化大小擴充大小顔色是否内陰影 #rgba（新的顔色值表示法）：

1，盒子透明度表示法：opacity：0.1; filter：alpha（opacity = 10）（相容IE）;

2，rgba（0,0,0,0.1）前三個數值表示顔色，第四個數值表示顔色的透明度 代碼示例： [AppleScript的]  純字幕：檢視  複制代碼 ?

1	CSS 3 圓角、陰影、rgba練習

-------------------- CSS3 transition動畫--------------------

＃transition-property設定過渡的屬性，比如：寬高背景顔色

＃過渡持續時間設定過渡的時間，比如：1秒500毫秒

＃過渡定時功能設定過渡的運動方式

1，線性：勻速

2，易于：開始和結束時慢速

3，易于在：開始時慢速

4，易于出：結束時慢速

5，易于進出：開始和結束時慢速

6，立方貝塞爾（N，N，N，N）：

比如：立方-bezier（0.845，-0.375，0.215，1.335）

曲線設定網站：https：//matthewlein.com/ceaser/＃transition-delay

設定動畫的延遲

#transition：屬性duration定時 - 函數延遲同時設定四個屬性 代碼示例：

[AppleScript的]  純字幕：檢視  複制代碼 ?

1	CSS 3 對應transition動畫練習

-------------------- CSS3 transform變換--------------------

#translate（x，y）設定盒子位移

#scale（x，y）設定盒子縮放

#rotate（deg）設定盒子旋轉

#skew（x-angle，y-angle）設定盒子斜切

#perspective設定透視距離

＃transform-style flat | 儲存-3D設定盒子是否按3d空間顯示

＃translateX，translateY，translateZ設定三維移動

＃rotateX，rotateY，rotateZ設定三維旋轉

＃scaleX，scaleY，scaleZ設定三維縮放

# transform -origin設定變形的中心點

＃backface-visibility設定盒子背面是否可見 代碼示例： [AppleScript的]  純字幕：檢視  複制代碼 ?

1	CSS 3 transform練習 實作翻面效果

-------------------- CSS3 animation動畫--------------------

＃@ keyframes定義關鍵幀動畫

＃animation-name動畫名稱

＃animation-duration動畫時間

＃animation-timing-function動畫曲線

1，linear勻速

2，緩和開始和結束慢速

3，ease-in開始是慢速

4，ease-out結束時慢速

5，ease-in-out開始和結束時慢速

6，steps動畫步數

＃animation-delay動畫延遲

＃animation-iteration-count動畫播放次數n | infinite

＃animation-direction

1，normal預設動畫結束不傳回

2 ，Alternate動畫結束後傳回

＃animation-play-state動畫狀态

1，暫停停止

2，running運動

＃animation-fill-mode動畫前後的狀态

1，none不改變預設行為

2，forwards當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）

3，backwards在animation-delay所指定的一段時間内，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）

4，向前和向後填充模式都被應用

#animation：名稱持續時間計時函數延遲疊代計數方向;同時設定多個屬性 代碼示例：

[AppleScript的]  純字幕：檢視  複制代碼 ?

1

人物走路動畫

-------------------- CSS3浏覽器相容字首--------------------

　　-ms-相容IE浏覽器

　　-moz-相容firefox

　　-o- opera

　　-webkit-鉻和safari

[AppleScript的]  純字幕：檢視  複制代碼 ?

1 2 3 4 5 6 7 8

1 1 div 2 2 { 3 3 transform : rotate ( 30 deg ) ; 4 4 - ms - transform : rotate ( 30 deg ) ;        / * IE 9 * / 5 5 - webkit - transform : rotate ( 30 deg ) ;    / * Safari and Chrome * / 6 6 - o - transform : rotate ( 30 deg ) ;        / * Opera * / 7 7 - moz - transform : rotate ( 30 deg ) ;        / * Firefox * / 8 8 }