今天是这个系列的第一篇,给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!(温馨提示:如果不显示请刷新页面,在 Chrome,Firefox 和 Safari 浏览器中效果最佳。)
在线演示地址:http://jsfiddle.net/lhb25/9EcuV/8/embedded/result/
HTML 部分非常简单,五种效果对应的class为:praticle、cells、jelly、blobbs、chase,代码如下:
- <section>
- <div class="particle"></div>
- <div class="cells"></div>
- <div class="jelly"></div>
- <div class="blobbs"></div>
- <div class="chase"></div>
- </section>
这些精美的效果用到了 CSS3 border-radius(圆角)、box-shadow(阴影)、transition(变形)、transform(转换)和 animation(动画)等特性,公共部分的完整代码如下:
- section > div {
- display: inline-block;
- position: relative;
- width: 200px;
- height: 200px;
- margin: 0px auto;
- border-radius: 50%;
- border: 10px solid hsla(0,0%,0%,.7);
- box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
- inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
- 0 8px 10px 2px hsla(0,0%,0%,.3);
- background-position: center;
- -webkit-transform: scale3d(.66,.66,1);
- -moz-transform: scale(.66);
- -ms-transform: scale(.66);
- -o-transform: scale(.66);
- transform: scale(.66);
- -webkit-transition: -webkit-transform .5s cubic-bezier(.32,0,.15,1);
- -moz-transition: -moz-transform .5s cubic-bezier(.32,0,.15,1);
- -ms-transition: -ms-transform .5s cubic-bezier(.32,0,.15,1);
- -o-transition: -o-transform .5s cubic-bezier(.32,0,.15,1);
- transition: transform .5s cubic-bezier(.32,0,.15,1);
- }
- section > div:hover {
- cursor: none;
- -webkit-transform: scale3d(1,1,1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
- -webkit-transition: -webkit-transform .2s cubic-bezier(.32,0,.15,1);
- -moz-transition: -moz-transform .2s cubic-bezier(.32,0,.15,1);
- -ms-transition: -ms-transform .2s cubic-bezier(.32,0,.15,1);
- -o-transition: -o-transform .2s cubic-bezier(.32,0,.15,1);
- transition: transform .2s cubic-bezier(.32,0,.15,1);
- }
这段代码看起来很长很复杂,其实大部分是兼容性代码,精简以后的代码如下:
- section > div {
- display: inline-block;
- position: relative;
- width: 200px;
- height: 200px;
- margin: 0px auto;
- /*对于正方形元素border-radius设置为50%刚好变成圆形*/
- border-radius: 50%;
- /*宽度为10px的、不透明度为0.7的黑色边框效果*/
- border: 10px solid hsla(0,0%,0%,.7);
- /*通过边框阴影实现立体按钮效果,inset是内阴影效果*/
- box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
- inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
- 0 8px 10px 2px hsla(0,0%,0%,.3);
- background-position: center;
- /*初始缩放0.66倍*/
- transform: scale(.66);
- /*在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果*/
- transition: transform .5s cubic-bezier(.32,0,.15,1);
- }
- section > div:hover {
- cursor: none;
- /*悬停时恢复原始大小*/
- transform: scale(1);
- /*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/
- transition: transform .2s cubic-bezier(.32,0,.15,1);
- }
上面的代码中用到了贝塞尔曲线,在数学的数值分析领域中,贝塞尔曲线又称贝赛尔曲线(Bézier曲线)是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例。
贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。
想更加深入的了解贝塞尔曲线可以到维基百科了解:贝塞尔曲线。下面是五种效果的完整代码: