簡介:課程分為二個實例講解,第一個實例用純CSS3代替JavaScript實現按鈕動畫效果,并詳細講解CSS3新增的transition、transform等屬性。第二個實例重點介紹利用<a>標簽制作自適應寬度的圓角按鈕。
第1章 CSS3實現“幽靈按鈕”特效
通過分析幽靈按鈕的實現原理,使用純CSS3代替JavaScript實現動畫效果,分析講解動畫的實現方法,并詳細講解CSS3新增的transition、transform等屬性。
- 視頻: 1-1 課程簡介 (01:40)
- 視頻: 1-2 html結構制作 (08:38)
- 視頻: 1-3 漸變旋轉放大動畫(上) (08:17)
- 視頻: 1-4 漸變旋轉放大動畫(下) (11:28)
- 視頻: 1-5 按鈕樣式及基本動畫實現 (14:47)
- 視頻: 1-6 從左到右線條動畫實現 (18:06)
- 視頻: 1-7 從上到下線條動畫實現 (04:46)
- 視頻: 1-8 從下到上線條動畫實現 (03:22)
- 視頻: 1-9 從右到左線條動畫實現 (03:45)
- 視頻: 1-10 提示框樣式制作 (13:27)
- 視頻: 1-11 jq實現提示框內容顯示 (18:35)
- 視頻: 1-12 動畫連續播放bug解決 (03:07)
第3章 用 a 標簽制作按鈕
重點講解如何用<a>標簽制作圓角水晶按鈕。主要是告訴你如何才能給普通按鈕簽貼上兩邊圓角,如何進行貼圖,交互效果如何實現。