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>

欢迎任何形式的转载，但请务必注明出处。