簡(jiǎn)介：課程分為二個(gè)實(shí)例講解，第一個(gè)實(shí)例用純CSS3代替JavaScript實(shí)現(xiàn)按鈕動(dòng)畫(huà)效果，并詳細(xì)講解CSS3新增的transition、transform等屬性。第二個(gè)實(shí)例重點(diǎn)介紹利用<a>標(biāo)簽制作自適應(yīng)寬度的圓角按鈕。
第1章 CSS3實(shí)現(xiàn)“幽靈按鈕”特效
通過(guò)分析幽靈按鈕的實(shí)現(xiàn)原理，使用純CSS3代替JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果，分析講解動(dòng)畫(huà)的實(shí)現(xiàn)方法，并詳細(xì)講解CSS3新增的transition、transform等屬性。
- 視頻： 1-1 課程簡(jiǎn)介 (01:40)
- 視頻： 1-2 html結(jié)構(gòu)制作 (08:38)
- 視頻： 1-3 漸變旋轉(zhuǎn)放大動(dòng)畫(huà)（上） (08:17)
- 視頻： 1-4 漸變旋轉(zhuǎn)放大動(dòng)畫(huà)（下） (11:28)
- 視頻： 1-5 按鈕樣式及基本動(dòng)畫(huà)實(shí)現(xiàn) (14:47)
- 視頻： 1-6 從左到右線條動(dòng)畫(huà)實(shí)現(xiàn) (18:06)
- 視頻： 1-7 從上到下線條動(dòng)畫(huà)實(shí)現(xiàn) (04:46)
- 視頻： 1-8 從下到上線條動(dòng)畫(huà)實(shí)現(xiàn) (03:22)
- 視頻： 1-9 從右到左線條動(dòng)畫(huà)實(shí)現(xiàn) (03:45)
- 視頻： 1-10 提示框樣式制作 (13:27)
- 視頻： 1-11 jq實(shí)現(xiàn)提示框內(nèi)容顯示 (18:35)
- 視頻： 1-12 動(dòng)畫(huà)連續(xù)播放bug解決 (03:07)
第2章 傳統(tǒng) input 標(biāo)簽
介紹<input>標(biāo)簽種類、默認(rèn)事件以及制作按鈕的局限性
第3章 用 a 標(biāo)簽制作按鈕
重點(diǎn)講解如何用<a>標(biāo)簽制作圓角水晶按鈕。主要是告訴你如何才能給普通按鈕簽貼上兩邊圓角，如何進(jìn)行貼圖，交互效果如何實(shí)現(xiàn)。
第4章 CSS3新增的圓角屬性
詳細(xì)講解用CSS3中的新屬性（Border-radius）來(lái)制作圓角水晶按鈕。