一组梦幻般的CSS3动画按钮效果(1)


今天是这个系列的第一篇,给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!(温馨提示:如果不显示请刷新页面,在 Chrome,Firefox 和 Safari 浏览器中效果最佳。)



在线演示地址:http://jsfiddle.net/lhb25/9EcuV/8/embedded/result/


HTML 部分非常简单,五种效果对应的class为:praticle、cells、jelly、blobbs、chase,代码如下:


  1. <section> 
  2.     <div class="particle"></div> 
  3.     <div class="cells"></div> 
  4.     <div class="jelly"></div> 
  5.     <div class="blobbs"></div> 
  6.     <div class="chase"></div> 
  7. </section> 

这些精美的效果用到了 CSS3 border-radius(圆角)、box-shadow(阴影)、transition(变形)、transform(转换)和 animation(动画)等特性,公共部分的完整代码如下:


  1. section > div {  
  2.     display: inline-block;  
  3.     positionrelative;  
  4.     width200px;  
  5.     height200px;  
  6.     margin0px auto;  
  7.     border-radius: 50%;  
  8.     border10px solid hsla(0,0%,0%,.7);  
  9.     box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),  
  10.                 inset 0 -5px 10px 3px hsla(0,0%,0%,.6),   
  11.                 0 8px 10px 2px hsla(0,0%,0%,.3);  
  12.            
  13.     background-positioncenter;  
  14.        
  15.     -webkit-transform: scale3d(.66,.66,1);  
  16.        -moz-transform:   scale(.66);  
  17.         -ms-transform:   scale(.66);  
  18.          -o-transform:   scale(.66);  
  19.             transform:   scale(.66);  
  20.        
  21.     -webkit-transition: -webkit-transform .5s cubic-bezier(.32,0,.15,1);  
  22.        -moz-transition:    -moz-transform .5s cubic-bezier(.32,0,.15,1);  
  23.         -ms-transition:     -ms-transform .5s cubic-bezier(.32,0,.15,1);  
  24.          -o-transition:      -o-transform .5s cubic-bezier(.32,0,.15,1);  
  25.             transition:         transform .5s cubic-bezier(.32,0,.15,1);  
  26. }  
  27.    
  28. section > div:hover {  
  29.     cursornone;  
  30.     -webkit-transform: scale3d(1,1,1);  
  31.        -moz-transform:   scale(1);  
  32.         -ms-transform:   scale(1);  
  33.          -o-transform:   scale(1);  
  34.             transform:   scale(1);  
  35.    
  36.     -webkit-transition: -webkit-transform .2s cubic-bezier(.32,0,.15,1);  
  37.        -moz-transition:    -moz-transform .2s cubic-bezier(.32,0,.15,1);  
  38.         -ms-transition:     -ms-transform .2s cubic-bezier(.32,0,.15,1);  
  39.          -o-transition:      -o-transform .2s cubic-bezier(.32,0,.15,1);  
  40.             transition:         transform .2s cubic-bezier(.32,0,.15,1);  

这段代码看起来很长很复杂,其实大部分是兼容性代码,精简以后的代码如下:


  1. section > div {  
  2.     display: inline-block;  
  3.     positionrelative;  
  4.     width200px;  
  5.     height200px;  
  6.     margin0px auto;  
  7.     /*对于正方形元素border-radius设置为50%刚好变成圆形*/ 
  8.     border-radius: 50%;   
  9.     /*宽度为10px的、不透明度为0.7的黑色边框效果*/ 
  10.     border10px solid hsla(0,0%,0%,.7);   
  11.     /*通过边框阴影实现立体按钮效果,inset是内阴影效果*/ 
  12.     box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),   
  13.                 inset 0 -5px 10px 3px hsla(0,0%,0%,.6),   
  14.                 0 8px 10px 2px hsla(0,0%,0%,.3);  
  15.     background-positioncenter;  
  16.     /*初始缩放0.66倍*/ 
  17.     transform: scale(.66);   
  18.     /*在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果*/ 
  19.     transition: transform .5s cubic-bezier(.32,0,.15,1);   
  20. }  
  21.     
  22. section > div:hover {  
  23.     cursornone;  
  24.     /*悬停时恢复原始大小*/ 
  25.     transform: scale(1);   
  26.     /*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/ 
  27.     transition: transform .2s cubic-bezier(.32,0,.15,1);   

上面的代码中用到了贝塞尔曲线,在数学的数值分析领域中,贝塞尔曲线又称贝赛尔曲线(Bézier曲线)是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例。


贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。


想更加深入的了解贝塞尔曲线可以到维基百科了解:贝塞尔曲线。下面是五种效果的完整代码:





苏ICP备16066217号-2