CSS3 探索發現系列：一組夢幻般的 CSS3 動畫按鈕效果

<a href="http://www.cnblogs.com/lhb25/archive/2012/12/12/must-read-links-for-web-designers-and-developers-volume-12.html" target="_blank">Web 開發人員和設計師必讀文章推薦</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/03/05/few-new-collections-css3-effects.html" target="_blank">20個非常絢麗的 CSS3 特性應用示範</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/05/12/2020284.html" target="_blank">推薦12個漂亮的 CSS3 按鈕實作方案</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/09/1964344.html" target="_blank">24款非常實用的 CSS3 工具終極收藏</a>

　　今天是這個系列的第一篇，給大家帶來的是五款夢幻般的動畫按鈕效果。下面是線上示範，把滑鼠放在按鈕上試試，有驚喜哦！（溫馨提示：如果不顯示請重新整理頁面，在 Chrome，Firefox 和 Safari 浏覽器中效果最佳。）

　　這段代碼看起來很長很複雜，其實大部分是相容性代碼，精簡以後的代碼如下：

　　上面的代碼中用到了貝塞爾曲線，在數學的數值分析領域中，貝塞爾曲線又稱貝賽爾曲線（Bézier曲線）是電腦圖形學中相當重要的參數曲線。更高次元的廣泛化貝塞爾曲線就稱作貝塞爾曲面，其中貝塞爾三角是一種特殊的執行個體。

　　貝塞爾曲線于1962年，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由Paul de Casteljau于1959年運用de Casteljau算法開發，以穩定數值的方法求出貝塞爾曲線。

　　效果一（Praticle）的完整代碼：

　　為了便于閱讀和學習，效果一的代碼精簡後如下：

　　效果二（Cells）的完整代碼：

　　效果二代碼和效果一代碼類似，差别是效果二的背景是隻用了重複漸變（repeating-radial-gradient），動畫效果隻是背景尺寸（background-size）的變化，精簡後的代碼如下：

　　效果三（Jelly）的完整代碼：

　　效果三和效果一的代碼類似，不同的地方是動畫多了個 50% 關鍵幀，精簡後的代碼如下：

　　效果四（Blobbs）的完整代碼：

　　效果四的背景位置變化動畫有0%，25%，50%，75%和100%五個關鍵幀，動畫效果更豐富，精簡後的代碼如下：

　　效果五（Chase）的完整代碼：

　　最後這個效果比前面四個效果都更複雜，背景位置變化動畫有0%，25%，50%，75%和100%五個關鍵幀，背景尺寸的變化動畫有0%（from），50%，100%（to）三個關鍵幀，精簡後的代碼如下：

<a href="http://www.cnblogs.com/lhb25/archive/2012/07/25/23-popular-logos-built-purely-with-css3.html" target="_blank">23個純 CSS3 打造的精美LOGO圖案</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">13套非常精美 Web 應用程式圖示素材</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html" target="_blank">10套精美的免費網站背景管理系統模闆</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html" target="_blank">8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/09/20/outstanding-admin-panels-part-three.html" target="_blank">60款很酷的 jQuery 幻燈片示範和下載下傳</a>

歡迎任何形式的轉載，但請務必注明出處。