創(chuàng)建按鈕 ????創(chuàng)建按鈕樣式???? 創(chuàng)建漸變光???? 創(chuàng)建什么時(shí)候漸變光出現(xiàn) ????創(chuàng)建漸變光的動(dòng)畫(huà)效果 ????動(dòng)畫(huà)開(kāi)始執(zhí)行
HTML+CSS，一共6個(gè)步驟實(shí)現(xiàn)效果
代碼效果：
（用靈者GIF錄制工具錄下來(lái)的，效果不怎么好）
HTML：
（先隨便寫(xiě)一個(gè)按鈕冲茸，a或者 button 都為所謂玄组。寫(xiě)兩個(gè)類(lèi)名蓬推，第一個(gè)顯示按鈕的樣式策严，第二個(gè)控制按鈕的動(dòng)畫(huà)轩端，就寫(xiě)一個(gè)類(lèi)名也無(wú)所謂遵绰，寫(xiě)兩個(gè)是便于維護(hù)）
CSS：
（給按鈕添加一些基礎(chǔ)的樣式吻谋，沒(méi)什么說(shuō)的忠蝗，這里需要寫(xiě)個(gè)position:relative ，好讓它偽類(lèi)有所依靠）
（在這個(gè)按鈕后面after偽元素插入一閃而過(guò)的光澤效果）
（ 當(dāng)這個(gè)按鈕被hover（鼠標(biāo)懸咐焓啊） 或 focus（聚焦）時(shí)阁最，在它之后的after偽元素將執(zhí)行一段動(dòng)畫(huà)，時(shí)間為1秒骇两，保持執(zhí)行后的效果并且只執(zhí)行一次速种。注意這里的hover和after順序不能顛倒，否則沒(méi)有效果出來(lái)脯颜，也在當(dāng)按鈕在懸浮和聚焦之后才動(dòng)畫(huà)開(kāi)始哟旗。 ）
（使用@keyframes規(guī)則 ，讓這個(gè)漸變光移動(dòng)位置栋操，形成最終的動(dòng)畫(huà)效果）
上圖的CSS里面有幾個(gè)可能不常用的屬性
text-transform: capitalize（默認(rèn)是none闸餐，改為capitalize只是把文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭，但是我的是中文所以無(wú)所謂矾芙。）
linear-gradientto bottom255,255,255.5（分別對(duì)應(yīng)：設(shè)置漸變線性漸變從上到下? ? 設(shè)置rgb顏色為白色? ? 最后一個(gè)是指這個(gè)背景的透明度為50%）
（大概的漸變效果是這樣的）
transform:rotateZ(60deg)（定義旋轉(zhuǎn)舍沙，這個(gè)漸變光沿著 Z 軸的 3D 旋轉(zhuǎn)60°，單位deg為度（degree）的意思剔宪，正數(shù)為順時(shí)針旋轉(zhuǎn)拂铡，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。）
（沿著Z軸旋轉(zhuǎn)后的漸變光效果是這樣的?）
transform:translate(-5em,9em)（定義移動(dòng)葱绒，把旋轉(zhuǎn)后的漸變光感帅，X水平方向的移動(dòng)-5em,Y垂直方向移動(dòng)9em）
（單位 “em”是一個(gè)相對(duì)的大小 ， 是相對(duì)于元素父元素的font-size地淀， 如果在一個(gè)設(shè)置字體大小為“16px”失球，此時(shí)這個(gè)的后代元素將繼承他的字體大小，除非重新在其后代元素中進(jìn)行過(guò)顯示的設(shè)置帮毁。此時(shí)实苞，如果你將其子元素的字體大小設(shè)置為“0.75em”，那么其字體大小計(jì)算出來(lái)后就相當(dāng)于“0.75 X 16px = 12px”烈疚；）
:focus（當(dāng)這個(gè)按鈕獲得焦點(diǎn)時(shí)選擇的樣式）
animation:sheen1sforwards(定義將動(dòng)畫(huà)與這個(gè)按鈕綁定黔牵，一：是規(guī)定一個(gè)動(dòng)畫(huà)的名稱，自己看著取名? ? 二：規(guī)定動(dòng)畫(huà)需要在1秒完成爷肝，也就是動(dòng)畫(huà)的速度? ? 三：當(dāng)動(dòng)畫(huà)完成后猾浦，保持最后一個(gè)屬性值)
@keyframes規(guī)則（使用@keyframes規(guī)則陆错，你可以創(chuàng)建動(dòng)畫(huà)。創(chuàng)建動(dòng)畫(huà)是通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)跃巡。在動(dòng)畫(huà)過(guò)程中危号，您可以更改CSS樣式的設(shè)定多次。指定的變化時(shí)發(fā)生時(shí)使用％素邪，或關(guān)鍵字"from"和"to"外莲，這是和0％到100％相同。0％是開(kāi)頭動(dòng)畫(huà)兔朦，100％是當(dāng)動(dòng)畫(huà)完成偷线。）
參考鏈接：
CSS3屬性transform詳解之（旋轉(zhuǎn):rotate,縮放:scale,傾斜:skew,移動(dòng):translate）
