創(chuàng)建按鈕 ????創(chuàng)建按鈕樣式???? 創(chuàng)建漸變光???? 創(chuàng)建什么時候漸變光出現(xiàn) ????創(chuàng)建漸變光的動畫效果 ????動畫開始執(zhí)行
HTML+CSS，一共6個步驟實現(xiàn)效果
代碼效果：
（用靈者GIF錄制工具錄下來的，效果不怎么好）
HTML：
（先隨便寫一個按鈕，a或者 button 都為所謂。寫兩個類名，第一個顯示按鈕的樣式，第二個控制按鈕的動畫，就寫一個類名也無所謂，寫兩個是便于維護）
CSS：
（給按鈕添加一些基礎(chǔ)的樣式，沒什么說的，這里需要寫個position:relative ，好讓它偽類有所依靠）
（在這個按鈕后面after偽元素插入一閃而過的光澤效果）
（ 當(dāng)這個按鈕被hover（鼠標(biāo)懸?。?或 focus（聚焦）時，在它之后的after偽元素將執(zhí)行一段動畫，時間為1秒，保持執(zhí)行后的效果并且只執(zhí)行一次。注意這里的hover和after順序不能顛倒，否則沒有效果出來，也在當(dāng)按鈕在懸浮和聚焦之后才動畫開始。 ）
（使用@keyframes規(guī)則 ，讓這個漸變光移動位置，形成最終的動畫效果）
上圖的CSS里面有幾個可能不常用的屬性
text-transform: capitalize（默認(rèn)是none，改為capitalize只是把文本中的每個單詞以大寫字母開頭，但是我的是中文所以無所謂。）
linear-gradientto bottom255,255,255.5（分別對應(yīng)：設(shè)置漸變線性漸變從上到下? ? 設(shè)置rgb顏色為白色? ? 最后一個是指這個背景的透明度為50%）
（大概的漸變效果是這樣的）
transform:rotateZ(60deg)（定義旋轉(zhuǎn)，這個漸變光沿著 Z 軸的 3D 旋轉(zhuǎn)60°，單位deg為度（degree）的意思，正數(shù)為順時針旋轉(zhuǎn)，負(fù)數(shù)為逆時針旋轉(zhuǎn)。）
（沿著Z軸旋轉(zhuǎn)后的漸變光效果是這樣的?）
transform:translate(-5em,9em)（定義移動，把旋轉(zhuǎn)后的漸變光，X水平方向的移動-5em,Y垂直方向移動9em）
（單位 “em”是一個相對的大小 ， 是相對于元素父元素的font-size， 如果在一個設(shè)置字體大小為“16px”，此時這個的后代元素將繼承他的字體大小，除非重新在其后代元素中進行過顯示的設(shè)置。此時，如果你將其子元素的字體大小設(shè)置為“0.75em”，那么其字體大小計算出來后就相當(dāng)于“0.75 X 16px = 12px”；）
:focus（當(dāng)這個按鈕獲得焦點時選擇的樣式）
animation:sheen1sforwards(定義將動畫與這個按鈕綁定，一：是規(guī)定一個動畫的名稱，自己看著取名? ? 二：規(guī)定動畫需要在1秒完成，也就是動畫的速度? ? 三：當(dāng)動畫完成后，保持最后一個屬性值)
@keyframes規(guī)則（使用@keyframes規(guī)則，你可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。在動畫過程中，您可以更改CSS樣式的設(shè)定多次。指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當(dāng)動畫完成。）
參考鏈接：
CSS3屬性transform詳解之（旋轉(zhuǎn):rotate,縮放:scale,傾斜:skew,移動:translate）
