css3新特效

選擇器

1. E:nth-child(n) 選擇器比對其父元素的第n個子元素，不論元素類型，n可以使數字，關鍵字，或公式
2. E:nth-of-type(n) 選擇與之其比對的父元素的第N個子元素
3. E:frist-child 相對于父級做參考，“所有”子元素的第一個子元素，并且“位置”要對應
4. E：frist-of-type 相對于父級做參考，“特定類型”（E）的第一個子元素
5. E：empty 選擇沒有子元素的每個E元素
6. E:target 選擇目前活動的E元素
7. ::selection 選擇被使用者選取的元素部分
8. 屬性選擇器
9. E[abc*=“def”] 選擇adc屬性值中包含子串"def"的所有元素
10. nth-child（n） ：指定摸個标簽，選取标簽所在的位置
11. cursor：滑鼠手性
12. ：nth-child /：：selection ： 文本選中設定

背景

1. background-size: cover; 不變形，占滿盒子，可能被裁剪
2. background-size: contain; 不變形，不一定占滿盒子，不會被裁剪
3. background-clip: 背景裁切：背景顔色（border，padding，margin）
4. background-origin： 背景圖檔預設顯示位置
5. border-image ：背景圖檔路徑
6. box-shadow 設定元素陰影 box-shadow: h-shadow（水準陰影的位置） v-shadow（垂直陰影的位置） blur（模糊距離） spread（陰影的大小） color;

文本

1. text-shadow:2px 2px 8px #000;參數1為向右的偏移量，參數2為向左的偏移量，參數3為漸變的像素，參數4為漸變的顔色
2. text-overflow:規定當文本溢出包含元素時發生的事情 text-overflow:ellipsis(省略)
3. text-wrap:規定文本換行的規則
4. word-break 規定非中日韓文本的換行規則
5. word-wrap 對長的不可分割的單詞進行分割并換行到下一行
6. white-space: 規定如何處理元素中的空白 white-space:nowrap 規定段落中的文本不進行換行

多行文本

-webkit-line-clamp:2;（行數）display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;

缺一不可

主流浏覽器(核心)

1. Chrome(webkit/blink) -webritl
2. IE(trident) -ms-
3. Firefox(gecko) -moz-
4. Safari(webkit) -webkit-
5. Opera(persto) -o-

漸變（background-image）

線性漸變 ：linear-gradient（）

徑向漸變 ：radial-gradient（）

錐形漸變 ：conic-gradient（）

過渡（transition）

transition-property:width //property為定義過渡的css屬性清單，清單以逗号分隔

transition-duration:2s; //過渡持續的時間

transition-timing-function:ease;

transition-delay:5s //過渡延遲5s進行

濾鏡（filter）

1. 亮度brightness(.5)
2. 對比度contrast(2)
3. 透明度opacity(.5)
4. 灰階:grayscale(100%)
5. 模糊blur(3px)
6. 褐色filter:sepia(1)
7. 飽和度saturate(2)
8. 色相旋轉hue-rotate(9odeg)
9. 反色ilter:invert(1)
10. 陰影 drop-shadow(5px 5px 5px #000）

伺服器字型

@font-face{ font-family：‘自己定義一個名字’ src：url（‘ ’）//字型路徑}

css3動畫樣式

iconfont

gzip（gz）：壓縮優化

動效（transition）

1. transition-property: all; 執行過渡過渡屬性:all
2. transition-duration:1500ms; 持續時間:s,ms
3. transition-timing-function:ease; 時間函數（速度曲線）:關鍵字，貝塞爾曲線，階躍 函數
4. ease-in：先慢後快
5. linear：勻速
6. transition-delay： ns/ms 延遲
7. 變換（transform）
8. transform: translate(0,0); ：平移
9. transform:rotate(45deg); ：旋轉
10. rotateX
11. rotateY
12. rotateZ
13. transform: scale(1） ：放大
14. transform: skew ( 45deg); ：傾斜
15. 行類元素不可用
16. /設定變換基準點:旋轉，縮放/transform-origin: left top;
17. /啟動浏覽器的3D渲染/transform-style: preserve-3d;

動畫

@keyframes

聲明動畫

/奇數反向，偶數反向正向執行/animation-direction: alternate-reverse;

animation-direction: alternate;/奇數正向，偶數反向執行/

/┌動畫結束後停留狀态：forwards（停留在動畫結束位置/animation-fill-mode:forwardsl:

animation-play-state: running;

繼續執行

animation-play-state:paused;

暫停