摘要：我們可以設(shè)置多個(gè)關(guān)鍵幀通過百分比將動(dòng)畫序列分割成多個(gè)節(jié)點(diǎn)在各節(jié)點(diǎn)中分別定義各屬性通過將動(dòng)畫應(yīng)用于相應(yīng)元素樣式屬性動(dòng)畫名稱持續(xù)時(shí)長默認(rèn)是。播放方向測試播放完的狀態(tài)最后一個(gè)關(guān)鍵幀第一個(gè)關(guān)鍵幀測試播放狀態(tài)默認(rèn)是。

CSS選擇器(基本、層級(jí)、屬性、偽類、偽狀態(tài))
CSS常用樣式屬性
CSS3 過渡、變換、動(dòng)畫
CSS3 3D場景搭建與應(yīng)用

CSS選擇器一共有五種:基本、層級(jí)、屬性、偽類、偽元素 CSS選擇器參考手冊(cè)

通配符/全局選擇器 *

ID選擇器 #Id

class選擇器 .classname

元素選擇器 element

群組選擇器 element,element

后代選擇器 selecter selecter

子元素選擇器 selcter>selecter 所有子元素 測試

相鄰兄弟選擇器 selecter+selecter 就下面的一個(gè) 測試

通配兄弟選擇器 selecter1~selecter2 selecter1之后出現(xiàn)的所有selecter2 測試

selecter[attr] 包含attr屬性的元素 測試

selecter[attr=val] arrt屬性值是val的元素 測試

seldcter[attr^=val] attr屬性值是以val開頭的元素 測試

selecter[attr$=val] attr屬性值是以val結(jié)束的元素 測試

selecter[attr~=val] attr屬性值val 或 包含val（兩個(gè)值以空格隔開，其中一個(gè)是val) 測試

selecter[attr*=val] attr屬性值中包含val的元素,只要有這個(gè)字母就可以 測試

selecter[attr|=val] attr屬性值中帶有以val開頭的元素,val值必須是整個(gè)單詞 測試

1) 動(dòng)態(tài)偽類選擇器

:link 未訪問的鏈接 測試

:visited 已訪問的鏈接

:hover 鼠標(biāo)移動(dòng)到鏈接上

:active 選定的鏈接

:focus 焦點(diǎn) 測試

提示:在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必須被置于 a:hover 之后，才是有效的。

2) 目標(biāo)偽類選擇器

:target 選取當(dāng)前活動(dòng)的目標(biāo)元素測試
URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)

3) 語言偽類選擇器

:lang 用于選取帶有以指定值開頭的 lang 屬性的元素 測試

4) UI元素偽類選擇器 （大多用在表單元素上）

:enabled 匹配已啟用的元素測試

:diabled 匹配被禁用的元素

:checked 匹配已被選中的input元素（只用于單選按鈕和復(fù)選框）測試

5) 結(jié)構(gòu)偽類選擇器

:first-child 父元素中第一個(gè)子元素 測試

:last-child 父元素中最后一個(gè)子元素 測試

:first-of-type　父元素中第一個(gè)類型(等于:nth-of-type(1)) 測試

:last-of-type　 父元素中最后一個(gè)類型(等于:nth-last-of-type(1) 測試

:only-child　父元素中有唯一子元素 測試

:only-of-type 父元素中有唯一子類型測試

:nth-child(n) 父元素中第n個(gè)子元素 測試

:nth-last-child(n) 父元素中第n個(gè)子元素(從最后一個(gè)子元素開始計(jì)數(shù)) 測試

:nth-of-type(n)　父元素中第n個(gè)子類型　測試　　　　　　　　

:nth-last-of-type(n) 父元素中第n個(gè)子類型(從最后一個(gè)子類型開始計(jì)數(shù))測試　　　　　　　

:empty 匹配空的元素(父元素中沒有有子元素和內(nèi)容)測試

:root 匹配文檔根元素(在HTML中根元素始終是html元素)測試

6) 否定偽類選擇器

:not(selecter) 匹配非指定元素/選擇器的每個(gè)元素測試

::first-letter 選擇首字母 測試

::first-line 選擇首行 測試

::before 在元素之前添加內(nèi)容，默認(rèn)行內(nèi)元素

::after 在元素之后添加內(nèi)容，默認(rèn)行內(nèi)元素

::selection 匹配被用戶選取的內(nèi)容(應(yīng)用CSS 屬性：color,background,cursor,outline) 測試

::-webkit-input-placeholder 改變表單的默認(rèn)樣式

偽類與偽元素的特性及其區(qū)別：

偽類本質(zhì)上是為了彌補(bǔ)常規(guī)CSS選擇器的不足，以便獲取到更多信息；

偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器；

CSS3中偽類和偽元素的語法不同；

可以同時(shí)使用多個(gè)偽類，而只能同時(shí)使用一個(gè)偽元素，并且只能出現(xiàn)在最后；（a:first-child:hover ；p:hover::first-letter ）

內(nèi)聯(lián)樣式(1000)>id選擇器(100)>類選擇器，屬性選擇器，偽類選擇器(10)>標(biāo)簽選擇器、偽元素選擇器(1)

提高優(yōu)先級(jí)的方法：使用!important關(guān)鍵字

css屬性參考手冊(cè)

寬度 width: 長度 | 百分比 | auto;

高度 height: 長度 | 百分比 | auto;

邊界 margin: 上 右 下 左 ;

填充 padding: 上 右 下 左 ;

定位 position: absolute | relative | static;

是否可見 visibility: inherit | visible | hidden;(會(huì)占據(jù)頁面上的空間)

類型 display: block| inline| inline-block|flex|none; flex圖片

溢出 overflow: visible | hidden | scroll auto;

浮動(dòng) float: left | right | none;清除浮動(dòng)

陰影 box-shadow: h-shadow(水平陰影位置) v-shadow(垂直陰影位置) blur(模糊距離) spread(陰影尺寸) color(陰影顏色) inset|outset;陰影測試

顏色 color: 數(shù)值;

大小 font-size: 數(shù)值;

字體 font-family: 宋體,sans-serif;

樣式 font-style: italic;(斜體) normal;(正常)

粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

行高 line-height :數(shù)值;

字間距 letter-spacing : 數(shù)值;

大小寫 text-transform: capitalize(首字大寫) | uppercase(英文大寫) | lowercase(英文小寫) | none;

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線)

排列 text-align: justify | left | right | center;

縮進(jìn) text-indent: 數(shù)值 | inherit;

陰影 text-shadow:數(shù)值;

顏色 background-color: 數(shù)值;

圖片 background-image: url() | none;

重復(fù) background-repeat: no-repeat | repeat | repeat-x | repeat-y;

滾動(dòng) background-attachment: fixed | scroll;

尺寸 background-size:length|percentage|cover|contain;

位置 background-position:數(shù)值 | top | bottom | left | right | center;

簡寫 background:背景顏色 | 背景圖象 | 背景重復(fù) | 背景附件 | 背景位置 ;

多值 background:url(a.jpg") no-repeat fixed center , url("a.jpg") no-repeat fixed top;
background-size:300px 300px,100px 100px;

樣式 border-style: solid;dotted;(點(diǎn)線) dashed;(虛線) double;(雙線) ;

寬度 border-width: 數(shù)值;

顏色 border-color: top值 right值 bottom值 left值;

簡寫 border: width style color;

類型 list-style-type: disc(實(shí)心圓形) | circle(空心圓形) | square(實(shí)心方形) | decimal(數(shù)字) |none;

位置 list-style-position: outside | inside;

圖像 list-style-image: URL;

簡寫 list-style:樣式類型 | 樣式位置 | url;

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

1) 移動(dòng)translate:將元素從原來的位置移動(dòng)到指定位置 測試

translate(x,y) 2D 轉(zhuǎn)換。

translate3d(x,y,z) 3D 轉(zhuǎn)換。

translateX(x) 用X軸的值轉(zhuǎn)換。

translateY(y) 用Y軸的值轉(zhuǎn)換。

translateZ(z) 3D轉(zhuǎn)換只是用Z軸的值。

2) 縮放scale:將元素根據(jù)中心原點(diǎn)進(jìn)行縮放，測試

scale(x,y) 2D縮放轉(zhuǎn)換。

scale3d(x,y,z) 3D 縮放轉(zhuǎn)換。

scaleX(x) 設(shè)置X軸的值來縮放轉(zhuǎn)換。測試

scaleY(y) 設(shè)置Y軸的值來縮放轉(zhuǎn)換。測試

scaleZ(z) 設(shè)置Z軸的值來3D縮放轉(zhuǎn)換。

3) 旋轉(zhuǎn)rotate：指定需要進(jìn)行旋轉(zhuǎn)的坐標(biāo)軸, angle 表示旋轉(zhuǎn)角度

rotate(angle) 2D 旋轉(zhuǎn) 測試

rotate3d(x,y,z,angle) 3D 旋轉(zhuǎn)。

rotateX(angle) 沿著X軸的 3D 旋轉(zhuǎn)。測試

rotateY(angle) 沿著Y軸的 3D 旋轉(zhuǎn)。測試

rotateZ(angle) 沿著Z軸的 3D 旋轉(zhuǎn)。

4) 傾斜skew(x-angle,y-angle) 能夠讓元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。skew圖片說明

skew(x-angle,y-angle) 沿著X和Y軸的2D傾斜轉(zhuǎn)換。測試

skewX(angle) 沿著X軸的2D傾斜轉(zhuǎn)換。 測試

skewY(angle) 沿著Y軸的2D傾斜轉(zhuǎn)換。測試

參與屬性 transition-property ：none|all| property(多個(gè)屬性名以逗號(hào)分隔)

持續(xù)時(shí)間 transition-duration：time(秒或毫秒)，默認(rèn)是0

轉(zhuǎn)速曲線 transition-timing-function 測試
linear以相同速度開始至結(jié)束的過渡效果。
ease 慢速開始，然后變快，然后慢速結(jié)束的過渡效果
ease-in 以慢速開始的過渡效果
ease-out 以慢速結(jié)束的過渡效果
ease-in-out以慢速開始和結(jié)束的過渡效果
cubic-bezier(n,n,n,n)定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

延遲時(shí)間 transition-delay：time(秒或毫秒)，默認(rèn)是0

簡寫 transition: property duration timing-function delay;測試

可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動(dòng)畫，常用來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果.測試

1)必要元素

通過@keyframes指定動(dòng)畫序列；自動(dòng)補(bǔ)間動(dòng)畫，確定兩個(gè)點(diǎn)，系統(tǒng)會(huì)自動(dòng)計(jì)算中間過程。這兩個(gè)點(diǎn)就稱為關(guān)鍵幀。我們可以設(shè)置多個(gè)關(guān)鍵幀

通過百分比將動(dòng)畫序列分割成多個(gè)節(jié)點(diǎn)；

在各節(jié)點(diǎn)中分別定義各屬性

通過animation將動(dòng)畫應(yīng)用于相應(yīng)元素；

2)animation樣式屬性

動(dòng)畫名稱 animation-name：move

持續(xù)時(shí)長 animation-duration : 1s ;默認(rèn)是 0。

播放速度 animation-timing-function: linear;默認(rèn)是 "ease" 測試

延時(shí)時(shí)間 animation-delay: 1s; 默認(rèn)是 0。注意：animation: move 3s linear 0 2 ;(不執(zhí)行) =>animation: move 3s linear 0s 2 ;

播放次數(shù) animation-iteration-count: n|infinite; 默認(rèn)是 1。

播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;測試

播放完的狀態(tài) animation-fill-mode: none | forwards(最后一個(gè)關(guān)鍵幀) | backwards(第一個(gè)關(guān)鍵幀) | both;測試

播放狀態(tài) animation-play-state: paused|running;默認(rèn)是 "running"。測試

animation所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。
簡寫animation: name duration timing-function delay iteration-count direction fill-mode; （默認(rèn)值none 0 ease 0 1 normal none）

perspective: number|none; 3D元素距視圖的距離，以像素計(jì)
perspective-origin:50% 50% 3D元素所基于的X軸和Y軸。用來改變 3D 元素的底部位置。
當(dāng)為元素定義 perspective,perspective-origin 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身

transform-style:preserve-3d; 設(shè)置3D,調(diào)整元素是在一個(gè)3維空間下
transform-origin:x(left/center/right/length/%) y(top/center/bottom/length/%) z(length); 調(diào)整旋轉(zhuǎn)中心 默認(rèn)值為(50% 50% 0) 測試 用例-邊框設(shè)置0.5px
backface-visibility:visible|hidden; 當(dāng)元素不面向屏幕時(shí)是否可見。測試

坐標(biāo)系原點(diǎn)在左上角,x軸的正方向是向右,y軸正方向是向下,z軸正方向是從屏幕到人的眼睛(垂直)

CSS3實(shí)現(xiàn)3D開門動(dòng)畫效果
圖片的旋轉(zhuǎn)木馬效果
CSS3 3D transform變換
張鑫旭博客