關(guān)鍵詞：animation 動畫?垂直居中方法，偽元素，transform-origin ，transform(變形）
? ? ??? ??????????????????????目的：實現(xiàn)Apple watch 圓環(huán)轉(zhuǎn)動
./? 代表當(dāng)前目錄，同一級的
../ 上一級目錄
/ 當(dāng)前根目錄，是相對目錄
1.如何讓盒子在網(wǎng)頁中垂直水平居中（第一種方法）
position:absolute;
top:0; left:0; right:0; botton:0;
margin:auto;
2.如何讓盒子在網(wǎng)頁中垂直水平居中（第二種方法）
position:absolute;
top:50%; left:50%;
trasform:translate(-50%,-50%);
3. border-radius: 50%;? ? //讓一個盒子變成圓
? ??border-radius: 0 8em 8em 0;//效果如下圖
4. 偽元素（偽元素相當(dāng)于是對當(dāng)前元素的裝潢，他們并不是節(jié)點(diǎn)，不會出現(xiàn)在dom樹中，但是在顯示上具備節(jié)點(diǎn)的效果）
? ? a.? ?::after? ?::before 前面的兩個冒號也可以寫成一個冒號 ，即 :after :before
? ? b.? ?::after和::before的使用很簡單，可以認(rèn)為其所在元素上存在一前一后的兩個的元素
? ? c.? ?這兩個元素默認(rèn)是內(nèi)聯(lián)元素,要使height元素有效的話，要display:block或float
? ? d.? ?必須設(shè)置content，否則這兩個偽元素是無法顯示出來的.
? ? e.??content屬性，會作為這兩個偽元素的內(nèi)容嵌入他們中,比如，
<style>?? p:before{?content: "H";}
? ??????????????p:after{content: "d";}
</style>
? ? ? ? ? ? ? ?<p>ello Worl</p>
5.?transform-origin (改變元素的原點(diǎn)位置)
a. 默認(rèn)情況下，變形的原點(diǎn)在中心點(diǎn)，即 transform-origin: 50%? 50%;
b.?transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關(guān)鍵詞
c.?2D的變形中的transform-origin屬性可以是一個參數(shù)值，也可以是兩個參數(shù)值。如果是兩個參數(shù)值時，第一值設(shè)置水平方向X軸的位置，第二個值是用來設(shè)置垂直方向Ｙ軸的位置
c. 3D的變形中，z-axis，用來設(shè)置3D變形中transform-origin遠(yuǎn)離用戶眼睛視點(diǎn)的距離，默認(rèn)值z=0 。
d.
top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
e.CSS3變形中旋轉(zhuǎn)、縮放、傾斜都可以通過transform-origin屬性重置元素的原點(diǎn),但其中的位移translate()始終以元素中心點(diǎn)進(jìn)行位移.
6.calc()函數(shù)在CSS3的用法
7.CSS動畫制作之transform(變形)
a. 在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix
b. rotate:旋轉(zhuǎn)? ?transform:rotate(30deg)? ?在設(shè)置旋轉(zhuǎn)角度之前，必須要先設(shè)置transform-origin
c. translate(移動)? ?分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動） 例子：transform:translate(x,y);
d. scale(縮放)??scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放）????????????縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。
e. skew(扭曲)?skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
f.?矩陣matrix? 略
8. animation 動畫
語法格式：animation:name keeping-time animate-function delay times iteration final
? ? ? ? ? ? ? ? ? ?例子： animation: boom 6s??ease 1s?infinite?normal?none
name: 動畫的名稱，自定義
keeping-time : 持續(xù)時間，s 和 ms 均可。
animate-function:?運(yùn)動方式（動畫方式）的貝賽爾曲線，可取值為：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
delay: 動畫延遲執(zhí)行的時間
times：動畫循環(huán)執(zhí)行的次數(shù)，無單位，infinite為無限循環(huán)
iteration:?如果動畫循環(huán)，循環(huán)的方式是：alternate(偶數(shù)次向前播放，奇數(shù)次向后播放)、normal(每次都向前播放)
final :?動畫的最后（達(dá)到100%）時的狀態(tài)，取值有：backward（回到初始狀態(tài)）、forwards（停在最終狀態(tài)）、none、both
關(guān)鍵幀(@keyframes)??定義動畫在不同階段的狀態(tài)
? 格式：@keyframes + 動畫名字 {
? ? ? ? 0%{}? 50%{}? 75%{}? 100%{}
}
備注：此文章根據(jù)實例總結(jié)而來，訪問更多請點(diǎn)我的github
