CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 一组梦幻般的 CSS3 动画按钮效果

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

给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!(温馨提示:如果不显示请刷新页面,在 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算法开发,以稳定数值的方法求出贝塞尔曲线。
  想更加深入的了解贝塞尔曲线可以到维基百科了解:贝塞尔曲线。下面是五种效果的完整代码:
  效果一(Praticle)的完整代码:
.particle {     background-size: 12px 12px;     background-color: #000;       /* the default highlight was too strong */    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);       background-image:     -webkit-radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                         -webkit-repeating-radial-gradient( white 0px, black 2px, black 48px);     background-image:        -moz-radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                            -moz-repeating-radial-gradient( white 0px, black 2px, black 48px);     background-image:         -ms-radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                             -ms-repeating-radial-gradient( white 0px, black 2px, black 48px);     background-image:          -o-radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                              -o-repeating-radial-gradient( white 0px, black 2px, black 48px);     background-image:             radial-gradient( #555 0px, hsla(0,0%,0%,0) 2px, hsla(0,0%,0%,0) 24px),                                 repeating-radial-gradient( white 0px, black 2px, black 48px); } .particle:hover {     -webkit-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;        -moz-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;         -ms-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;          -o-animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate;             animation: particle-size .24s linear infinite, particle-positon .48s linear infinite alternate; }   @-webkit-keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }    @-moz-keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }     @-ms-keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }      @-o-keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }         @keyframes particle-size { from { background-size: 6px 6px, 12px 12px; } to { background-size: 12px 12px, 24px 24px; } }   @-webkit-keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }    @-moz-keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }     @-ms-keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }      @-o-keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }         @keyframes particle-positon { from { background-position: 60px, 60px; } to { background-position: 140px, 140px; } }

【一组梦幻般的 CSS3 动画按钮效果】相关文章

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

2. 用CSS3打造一组闪亮的半透明按钮效果

3. 一组超实用的 CSS3 悬停效果和动画

4. 使用CSS3设计漂亮的动画效果3D大按钮

5. 一组免费的响应式 HTML5 & CSS3 网站模板

6. 8款超酷而实用的CSS3按钮动画

7. 使用CSS3帧动画打造与众不同的响应式提交按钮

8. CSS和CSS3按钮选择器对比

9. CSS3动画效果-animate.css

10. 分享一组很赞的 jQuery 特效【附源码下载】

本文来源:https://www.51html5.com/a911.html

点击展开全部

﹝一组梦幻般的 CSS3 动画按钮效果﹞相关内容

「一组梦幻般的 CSS3 动画按钮效果」相关专题

其它栏目

也许您还喜欢