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

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

今天是这个系列的第一篇,给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!(温馨提示:如果不显示请刷新页面,在 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算法开发,以稳定数值的方法求出贝塞尔曲线。

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

#p#

效果一(Praticle)的完整代码:

  1. .particle {  
  2.     background-size12px 12px;  
  3.     background-color#000;  
  4.    
  5.     /* the default highlight was too strong */ 
  6.     box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.25), inset 0 -5px 10px 3px hsla(0,0%,0%,.6), 0 8px 10px 2px hsla(0,0%,0%,.3);  
  7.    
  8.     background-image:     -webkit-radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  9.                         -webkit-repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  10.     background-image:        -moz-radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  11.                            -moz-repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  12.     background-image:         -ms-radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  13.                             -ms-repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  14.     background-image:          -o-radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  15.                              -o-repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  16.     background-image:             radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  17.                                 repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  18. }  
  19. .particle:hover {  
  20.     -webkit-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;  
  21.        -moz-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;  
  22.         -ms-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;  
  23.          -o-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;  
  24.             animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;  
  25. }  
  26.    
  27. @-webkit-keyframes particle-size { from { background-size6px 6px12px 12px; } to { background-size12px 12px24px 24px; } }  
  28.    @-moz-keyframes particle-size { from { background-size6px 6px12px 12px; } to { background-size12px 12px24px 24px; } }  
  29.     @-ms-keyframes particle-size { from { background-size6px 6px12px 12px; } to { background-size12px 12px24px 24px; } }  
  30.      @-o-keyframes particle-size { from { background-size6px 6px12px 12px; } to { background-size12px 12px24px 24px; } }  
  31.         @keyframes particle-size { from { background-size6px 6px12px 12px; } to { background-size12px 12px24px 24px; } }  
  32.    
  33. @-webkit-keyframes particle-positon { from { background-position60px60px; } to { background-position140px140px; } }  
  34.    @-moz-keyframes particle-positon { from { background-position60px60px; } to { background-position140px140px; } }  
  35.     @-ms-keyframes particle-positon { from { background-position60px60px; } to { background-position140px140px; } }  
  36.      @-o-keyframes particle-positon { from { background-position60px60px; } to { background-position140px140px; } }  
  37.         @keyframes particle-positon { from { background-position60px60px; } to { background-position140px140px; } } 

这个效果使用了 CSS3 radial-gradient(径向渐变或者放射性渐变,另外一种是线性渐变)、repeating-radial-gradient(重复渐变)以及 CSS3 Animation(动画),关于 CSS3 渐变的详细使用方法可以参考这篇文章:CSS3 Gradient,CSS3 动画可以参考这篇文章:CSS3 Animation

为了便于阅读和学习,效果一的代码精简后如下:

  1. .particle {  
  2.     background-size12px 12px;  
  3.     background-color#000;  
  4.     /*前面公共样式部分box-shadow产生的高亮效果太强,这里重新配置*/ 
  5.     box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.25),  
  6.                 inset 0 -5px 10px 3px hsla(0,0%,0%,.6),  
  7.                 0 8px 10px 2px hsla(0,0%,0%,.3);  
  8.     /*使用径向渐变和重复渐变来实现背景图片效果*/ 
  9.     background-image: radial-gradient( #555 0px, hsla(0,0%,0%,02px, hsla(0,0%,0%,024px),  
  10.                       repeating-radial-gradient( white 0pxblack 2pxblack 48px);  
  11. }  
  12.    
  13. .particle:hover {  
  14.     /*鼠标悬停的时候执行particle-size和particle-positon两个动画效果*/ 
  15.     animation: particle-size .24s linear infinite,   
  16.         particle-positon .48s linear infinite alternate;  
  17. }  
  18.        
  19. @keyframes particle-size {   
  20.     /*这个名为particle-size的关键帧用来产生背景尺寸变化动画效果*/ 
  21.     from { background-size6px 6px12px 12px; }   
  22.     to { background-size12px 12px24px 24px; }   
  23. }  
  24.    
  25. @keyframes particle-positon {   
  26.     /*这个名为particle-positon的关键帧用来产生背景位置变化动画效果*/ 
  27.     from { background-position60px60px; }   
  28.     to { background-position140px140px; }   

效果二(Cells)的完整代码:

  1. .cells {  
  2.     background-size24px 24px;  
  3.     background-color#fff;  
  4.     background-image: -webkit-repeating-radial-gradient( black 8pxwhite 12px);  
  5.     background-image:    -moz-repeating-radial-gradient( black 8pxwhite 12px);  
  6.     background-image:       -ms-repeating-radial-gradient( black 8pxwhite 12px);  
  7.     background-image:        -o-repeating-radial-gradient( black 8pxwhite 12px);  
  8.     background-image:           repeating-radial-gradient( black 8pxwhite 12px);  
  9. }  
  10. .cells:hover {  
  11.     -webkit-animation: cells 0.4s linear infinite;  
  12.        -moz-animation: cells 0.4s linear infinite;  
  13.         -ms-animation: cells 0.4s linear infinite;  
  14.          -o-animation: cells 0.4s linear infinite;  
  15.             animation: cells 0.4s linear infinite;  
  16. }  
  17. @-webkit-keyframes cells { from { background-size12px 12px; } to { background-size24px 24px; } }  
  18.    @-moz-keyframes cells { from { background-size12px 12px; } to { background-size24px 24px; } }  
  19.     @-ms-keyframes cells { from { background-size12px 12px; } to { background-size24px 24px; } }  
  20.      @-o-keyframes cells { from { background-size12px 12px; } to { background-size24px 24px; } }  
  21.         @keyframes cells { from { background-size12px 12px; } to { background-size24px 24px; } } 

效果二代码和效果一代码类似,差别是效果二的背景是只用了重复渐变(repeating-radial-gradient),动画效果只是背景尺寸(background-size)的变化,精简后的代码如下:

  1. .cells {  
  2.     background-size24px 24px;  
  3.     background-color#fff;  
  4.     /*使用重复径向渐变特性来实现背景图片效果*/ 
  5.     background-image: repeating-radial-gradient( black 8pxwhite 12px);  
  6. }  
  7. .cells:hover {  
  8.     /*鼠标悬停的时候执行cells动画效果*/ 
  9.     animation: cells 0.4s linear infinite;  
  10. }  
  11. @keyframes cells {   
  12.     /*定义一个名为cells的关键帧用来产生背景尺寸变化动画效果*/ 
  13.     from { background-size12px 12px; }   
  14.     to { background-size24px 24px; }   

效果三(Jelly)的完整代码:

  1. .jelly {  
  2.     background-size60px 60px;  
  3.     background-color: hsla(320,80%,60%,1);  
  4.    
  5.     background-image:     -webkit-repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  6.                         -webkit-repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  7.     background-image:        -moz-repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  8.                            -moz-repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  9.     background-image:         -ms-repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  10.                             -ms-repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  11.     background-image:          -o-repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  12.                              -o-repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  13.     background-image:             repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  14.                                 repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  15. }  
  16. .jelly:hover {  
  17.     -webkit-animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  18.        -moz-animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  19.         -ms-animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  20.          -o-animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  21.             animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  22. }  
  23.    
  24. @-webkit-keyframes jelly {  
  25.     from { background-size:  60px  60px,  24px  24px; }  
  26.     50%  { background-size120px 120px100px 100px; }  
  27.     to   { background-size:  24px  24px140px 140px; }  
  28. }  
  29. @-moz-keyframes jelly {  
  30.     from { background-size:  60px  60px,  24px  24px; }  
  31.     50%  { background-size120px 120px100px 100px; }  
  32.     to   { background-size:  24px  24px140px 140px; }  
  33. }  
  34. @-ms-keyframes jelly {  
  35.     from { background-size:  60px  60px,  24px  24px; }  
  36.     50%  { background-size120px 120px100px 100px; }  
  37.     to   { background-size:  24px  24px140px 140px; }  
  38. }  
  39. @-o-keyframes jelly {  
  40.     from { background-size:  60px  60px,  24px  24px; }  
  41.     50%  { background-size120px 120px100px 100px; }  
  42.     to   { background-size:  24px  24px140px 140px; }  
  43. }  
  44. @keyframes jelly {  
  45.     from { background-size:  60px  60px,  24px  24px; }  
  46.     50%  { background-size120px 120px100px 100px; }  
  47.     to   { background-size:  24px  24px140px 140px; }  

效果三和效果一的代码类似,不同的地方是动画多了个 50% 关键帧,精简后的代码如下:

  1. .jelly {  
  2.     background-size60px 60px;  
  3.     background-color: hsla(320,80%,60%,1);  
  4.     /*使用径向渐变和重复渐变来实现背景图片效果*/ 
  5.     background-image: repeating-radial-gradient( hsla(320,100%,60%,.60px, hsla(220,100%,60%,060%),  
  6.                     repeating-radial-gradient( hsla(330,100%,40%,112%, hsla(320,80%,60%,124px);  
  7. }  
  8. .jelly:hover {  
  9.     /*鼠标悬停的时候执行jelly动画效果*/ 
  10.     animation: jelly 1.4s cubic-bezier(.1,.4,.9,.6) infinite;  
  11. }  
  12.    
  13. @keyframes jelly {  
  14.     /*定义一个名为jelly的关键帧用来产生背景尺寸变化动画效果*/ 
  15.     from { background-size:  60px  60px,  24px  24px; }  
  16.     50%  { background-size120px 120px100px 100px; }  
  17.     to   { background-size:  24px  24px140px 140px; }  

效果四(Blobbs)的完整代码:

  1. .blobbs {  
  2.     background-size66px 66px;  
  3.     background-color: hsl(200,100%,50%);  
  4.    
  5.     background-image:     -webkit-repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  6.                         -webkit-repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  7.     background-image:        -moz-repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  8.                            -moz-repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  9.     background-image:         -ms-repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  10.                             -ms-repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  11.     background-image:          -o-repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  12.                              -o-repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  13.     background-image:             repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  14.                                 repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  15. }  
  16. .blobbs:hover {  
  17.     -webkit-animation:     blobbs-position   6s cubic-bezier(.4,0,.2,1) infinite,  
  18.                         blobbs-size     .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  19.        -moz-animation:     blobbs-position   6s cubic-bezier(.4,0,.2,1) infinite,  
  20.                         blobbs-size     .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  21.         -ms-animation:     blobbs-position   6s cubic-bezier(.4,0,.2,1) infinite,  
  22.                         blobbs-size     .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  23.          -o-animation:     blobbs-position   6s cubic-bezier(.4,0,.2,1) infinite,  
  24.                         blobbs-size     .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  25.             animation:     blobbs-position   6s cubic-bezier(.4,0,.2,1) infinite,  
  26.                         blobbs-size     .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  27. }  
  28.    
  29. @-webkit-keyframes blobbs-position {  
  30.       0% { background-positionleft  top,      left  top; }  
  31.      25% { background-positionright top,         left  bottom; }  
  32.      50% { background-positionright bottom,     right bottom; }  
  33.      75% { background-positionleft  bottom,    right top; }  
  34.     100% { background-positionleft  top,        left  top; }  
  35. }  
  36. @-moz-keyframes blobbs-position {  
  37.       0% { background-positionleft  top,      left  top; }  
  38.      25% { background-positionright top,         left  bottom; }  
  39.      50% { background-positionright bottom,     right bottom; }  
  40.      75% { background-positionleft  bottom,    right top; }  
  41.     100% { background-positionleft  top,        left  top; }  
  42. }  
  43. @-ms-keyframes blobbs-position {  
  44.       0% { background-positionleft  top,      left  top; }  
  45.      25% { background-positionright top,         left  bottom; }  
  46.      50% { background-positionright bottom,     right bottom; }  
  47.      75% { background-positionleft  bottom,    right top; }  
  48.     100% { background-positionleft  top,        left  top; }  
  49. }  
  50. @-o-keyframes blobbs-position {  
  51.       0% { background-positionleft  top,      left  top; }  
  52.      25% { background-positionright top,         left  bottom; }  
  53.      50% { background-positionright bottom,     right bottom; }  
  54.      75% { background-positionleft  bottom,    right top; }  
  55.     100% { background-positionleft  top,        left  top; }  
  56. }  
  57. @keyframes blobbs-position {  
  58.       0% { background-positionleft  top,      left  top; }  
  59.      25% { background-positionright top,         left  bottom; }  
  60.      50% { background-positionright bottom,     right bottom; }  
  61.      75% { background-positionleft  bottom,    right top; }  
  62.     100% { background-positionleft  top,        left  top; }  
  63. }  
  64.    
  65. @-webkit-keyframes blobbs-size { from { background-size200px 200px200px 200px; } to { background-size:  66px  66px66px 66px; } }  
  66.    @-moz-keyframes blobbs-size { from { background-size200px 200px200px 200px; } to { background-size:  66px  66px66px 66px; } }  
  67.     @-ms-keyframes blobbs-size { from { background-size200px 200px200px 200px; } to { background-size:  66px  66px66px 66px; } }  
  68.      @-o-keyframes blobbs-size { from { background-size200px 200px200px 200px; } to { background-size:  66px  66px66px 66px; } }  
  69.         @keyframes blobbs-size { from { background-size200px 200px200px 200px; } to { background-size:  66px  66px66px 66px; } } 

效果四的背景位置变化动画有0%,25%,50%,75%和100%五个关键帧,动画效果更丰富,精简后的代码如下:

  1. .blobbs {  
  2.     background-size66px 66px;  
  3.     background-color: hsl(200,100%,50%);  
  4.     background-image: repeating-radial-gradient( hsla(200,100%,80%,.80px, hsla(200,100%,80%,.54px, hsla(200,100%,80%,050px),  
  5.      repeating-radial-gradient( hsla(260,100%0%00px, hsla(260,100%,50%,.12px, hsla(260,100%0%,010px);  
  6. }  
  7. .blobbs:hover {  
  8.     animation: blobbs-position 6s cubic-bezier(.4,0,.2,1) infinite,  
  9.                         blobbs-size .75s cubic-bezier(.4,0,.2,1) infinite alternate;  
  10. }  
  11.    
  12. @keyframes blobbs-position {  
  13.       0% { background-positionleft  topleft  top; }  
  14.      25% { background-positionright topleft  bottom; }  
  15.      50% { background-positionright bottomright bottom; }  
  16.      75% { background-positionleft  bottomright top; }  
  17.     100% { background-positionleft  topleft  top; }  
  18. }  
  19.    
  20. @keyframes blobbs-size {   
  21.     from { background-size200px 200px200px 200px; }   
  22.     to { background-size:  66px  66px66px 66px; }   

效果五(Chase)的完整代码:

  1. .chase {  
  2.     background-repeatno-repeatrepeat;  
  3.     background-size180px 180px;  
  4.     background-color: hsl(50,100%,70%);  
  5.    
  6.     background-image:     -webkit-repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  7.                         -webkit-repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  8.     background-image:        -moz-repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  9.                            -moz-repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  10.     background-image:         -ms-repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  11.                             -ms-repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  12.     background-image:          -o-repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  13.                              -o-repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  14.     background-image:             repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  15.                                 repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  16. }  
  17. .chase:hover {  
  18.     -webkit-animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  19.        -moz-animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  20.         -ms-animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  21.          -o-animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  22.             animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  23. }  
  24.    
  25. @-webkit-keyframes chase-position {  
  26.       0% { background-positionleft  top,      left  top; }  
  27.      25% { background-positionright top,         left  bottom; }  
  28.      50% { background-positionright bottom,     right bottom; }  
  29.      75% { background-positionleft  bottom,    right top; }  
  30.     100% { background-positionleft  top,        left  top; }  
  31. }  
  32. @-moz-keyframes chase-position {  
  33.       0% { background-positionleft  top,      left  top; }  
  34.      25% { background-positionright top,         left  bottom; }  
  35.      50% { background-positionright bottom,     right bottom; }  
  36.      75% { background-positionleft  bottom,    right top; }  
  37.     100% { background-positionleft  top,        left  top; }  
  38. }  
  39. @-ms-keyframes chase-position {  
  40.       0% { background-positionleft  top,      left  top; }  
  41.      25% { background-positionright top,         left  bottom; }  
  42.      50% { background-positionright bottom,     right bottom; }  
  43.      75% { background-positionleft  bottom,    right top; }  
  44.     100% { background-positionleft  top,        left  top; }  
  45. }  
  46. @-o-keyframes chase-position {  
  47.       0% { background-positionleft  top,      left  top; }  
  48.      25% { background-positionright top,         left  bottom; }  
  49.      50% { background-positionright bottom,     right bottom; }  
  50.      75% { background-positionleft  bottom,    right top; }  
  51.     100% { background-positionleft  top,        left  top; }  
  52. }  
  53. @keyframes chase-position {  
  54.       0% { background-positionleft  top,      left  top; }  
  55.      25% { background-positionright top,         left  bottom; }  
  56.      50% { background-positionright bottom,     right bottom; }  
  57.      75% { background-positionleft  bottom,    right top; }  
  58.     100% { background-positionleft  top,        left  top; }  
  59. }  
  60.    
  61. @-webkit-keyframes chase-size {  
  62.     from { background-size120px 120px300px 300px; }  
  63.      50% { background-size160px 160px150px 150px; }  
  64.     to   { background-size180px 180px100px 100px; }  
  65. }  
  66. @-moz-keyframes chase-size {  
  67.     from { background-size120px 120px300px 300px; }  
  68.      50% { background-size160px 160px150px 150px; }  
  69.     to   { background-size180px 180px100px 100px; }  
  70. }  
  71. @-ms-keyframes chase-size {  
  72.     from { background-size120px 120px300px 300px; }  
  73.      50% { background-size160px 160px150px 150px; }  
  74.     to   { background-size180px 180px100px 100px; }  
  75. }  
  76. @-o-keyframes chase-size {  
  77.     from { background-size120px 120px300px 300px; }  
  78.      50% { background-size160px 160px150px 150px; }  
  79.     to   { background-size180px 180px100px 100px; }  
  80. }  
  81. @keyframes chase-size {  
  82.     from { background-size120px 120px300px 300px; }  
  83.      50% { background-size160px 160px150px 150px; }  
  84.     to   { background-size180px 180px100px 100px; }  
  85. }​ 

最后这个效果比前面四个效果都更复杂,背景位置变化动画有0%,25%,50%,75%和100%五个关键帧,背景尺寸的变化动画有0%(from),50%,100%(to)三个关键帧,精简后的代码如下:

  1. .chase {  
  2.     background-repeatno-repeatrepeat;  
  3.     background-size180px 180px;  
  4.     background-color: hsl(50,100%,70%);  
  5.     background-image: repeating-radial-gradient( hsla(50,100%,100%,10px, hsla(50,100%,90%110px, hsla(50,100%,70%,.2)  12px, hsla(50,100%,70%,0130px),  
  6.     repeating-radial-gradient( hsla(20,100%50%,020%, hsla(20,100%,50%,.480%,  hsla(50,100%,70%1120px);  
  7. }  
  8. .chase:hover {  
  9.     animation: chase-position 1.2s infinite, chase-size .4s infinite alternate;  
  10. }  
  11.    
  12. @keyframes chase-position {  
  13.       0% { background-positionleft  top,      left  top; }  
  14.      25% { background-positionright top,         left  bottom; }  
  15.      50% { background-positionright bottom,     right bottom; }  
  16.      75% { background-positionleft  bottom,    right top; }  
  17.     100% { background-positionleft  top,        left  top; }  
  18. }  
  19.    
  20. @keyframes chase-size {  
  21.     from { background-size120px 120px300px 300px; }  
  22.      50% { background-size160px 160px150px 150px; }  
  23.     to   { background-size180px 180px100px 100px; }  
  24. }​ 

原文链接:http://www.cnblogs.com/lhb25/archive/2012/12/20/css3-buttons-with-animation.html

完整源码下载  

【编辑推荐】

  1. 绝对令人的惊叹的CSS3折叠效果
  2. 分享30个开发人员有用的CSS代码片段
  3. CSS深入研究:display的恐怖故事解密(2)
  4. CSS深入研究:display的恐怖故事解密(1)
  5. 如何进行CSS代码减肥提升前端性能
责任编辑:张伟 来源: 博客园
相关推荐

2011-04-19 10:15:34

CSS3CSS

2017-04-06 08:55:38

Web开发容器安全移动应用

2012-09-13 09:24:31

CSSJSjQ

2013-01-30 16:15:40

adobeHTML5css3

2017-05-11 15:20:52

CSS3动画前端

2017-05-03 11:30:20

CSS3小黄人动画

2011-06-29 13:22:58

CSS3

2014-04-29 10:39:27

CSS3JavaScript

2015-10-14 09:50:11

css3动画模拟

2012-12-04 10:52:03

CSS3Web

2011-02-17 10:54:59

CSS3变换 简单快捷

2021-09-08 22:28:13

前端Css3动画

2013-04-10 09:28:24

CSS3CSS

2012-03-02 10:50:20

jQuery

2015-12-01 09:52:03

CSS3动画源码

2023-05-09 12:31:48

CSS3动画库场景

2023-11-01 08:33:45

CSS动画效果

2015-10-09 09:43:28

CSS CSS3

2021-02-24 09:36:03

鸿蒙CSS应用开发

2013-01-30 15:59:29

adobeCSS3HTML5
点赞
收藏

51CTO技术栈公众号