一、動畫屬性
1. @keyframes
定義一個動畫，@keyframes定義的動畫名稱用來被調(diào)用。
2. animation
復(fù)合屬性，設(shè)置延遲，重復(fù)，過渡類型等特效。
<!--移動特效-->
<div><div>
div{
width:100px;height:100px;
background-color:red;
position:absolute;
animation:mymove 3s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
二、Transition
設(shè)置元素的CSS改變時的過渡效果
div
{
width:100px;
transition: width 2s;
}
三、Transform
旋轉(zhuǎn)，縮放，傾斜或平移給定元素。
div{
transform: rotate(0.5turn);
}
四、Flex
（一）容器屬性
1. flex-direction
flex-direction屬性決定主軸的方向（即項目的排列方向）。
- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
2. flex-wrap
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
- nowrap（默認）：不換行。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
3. justify-content
justify-content屬性定義了項目在主軸上的對齊方式。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
4. align-items
- align-items屬性定義項目在交叉軸上如何對齊。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
5. align-content
屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
（二）項目屬性
1. order
order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
2. flex-grow
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
3. flex-shrink
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
4. flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
5. align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性。
五、變美
1. border-radius
創(chuàng)建圓角邊框
2. box-shadow
為元素添加陰影
3. border-image
使用圖片來繪制邊框
4. linear-gradient
線性漸變
六、字體庫
@font-face特性：當您找到或購買到希望使用的字體時，可將該字體文件存放到web服務(wù)器上，它會在需要時被自動下載到用戶的計算機上。
