HTML5 SVG带圆形进度条动画的提交按钮特效

时间：2016-03-08
　　简要教程
　　这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效。该提交按钮在被点击之后，按钮变形为一个圆形的进度条，当进度条运行一周之后，可以设置提交成功和提交失败的两种按钮状态。

2.jpg
查看演示    下载插件

　　制作方法
　　HTML结构
　　制作这个提交按钮特效的HTML结构需要一个包裹容器，里面有一个提交按钮和三个<svg>元素。
  1. <div id="progress-button" class="progress-button">
  2.   <!-- 提交按钮 -->
  3.   <button><span>Submit</span></button>

  5.   <!-- svg 圆形进度条 -->
  6.   <svg class="progress-circle" width="70" height="70">
  7.     <path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>
  8.   </svg>

  10.   <!-- 提交成功的标记 -->
  11.   <svg class="checkmark" width="70" height="70">
  12.     <path d="m31.5,46.5l15.3,-23.2"/>
  13.     <path d="m31.5,46.5l-8.5,-7.1"/>
  14.   </svg>

  16.   <!-- 提交失败的标记 -->
  17.   <svg class="cross" width="70" height="70">
  18.     <path d="m35,35l-9.3,-9.3"/>
  19.     <path d="m35,35l9.3,9.3"/>
  20.     <path d="m35,35l-9.3,9.3"/>
  21.     <path d="m35,35l9.3,-9.3"/>
  22.   </svg>
  23. </div>            
复制代码

　　CSS样式
　　首先提交按钮容器需要设置为inline-block样式。
  1. .progress-button {
  2.   position: relative;
  3.   display: inline-block;
  4.   text-align: center;
  5. }     
复制代码

　　然后在为提交按钮提供一些基本样式，并设置过渡动画效果。
  1. Undo
  2. Redo全屏常用
  3. 纯文本
  4. 微软雅黑3 Hr
  5. B I U Color BgColor Url Unlink
  6. Table
  7. Removeformat
  8. AutotypesetLeftCenterRight
  9. FloatLeftFloatRightOrderedlistUnorderedlist表情图片附件引用代码
复制代码

　　在鼠标滑过提交按钮的时候，修改按钮的背景颜色和文字颜色。
  1. .progress-button button:hover {
  2.   background-color: #1ECD97;
  3.   color: #fff;
  4. }        
复制代码

　　所有的SVG元素都采用绝对定位方式来居中对齐，并且不允许有任何的pointer-events。
  1. .progress-button svg {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 50%;
  5.   -webkit-transform: translateX(-50%);
  6.   transform: translateX(-50%);
  7.   pointer-events: none;
  8. }            
复制代码

　　SVG的路径没有任何的填充色，只有描边。开始的时候它们是被隐藏起来的，透明度被设置为0。
  1. .progress-button svg path {
  2.   opacity: 0;
  3.   fill: none;
  4. }      
复制代码

　　圆形进度条通过设置描边为5个单位来创建。
  1. .progress-button svg.progress-circle path {
  2.   stroke: #1ECD97;
  3.   stroke-width: 5;
  4. }      
复制代码

　　当开始loading线程的时候，按钮会变形为圆形，和圆形进度条相同的大小。
  1. .loading.progress-button button {
  2.   width: 70px; /* 制作一个圆形 */
  3.   border-width: 5px;
  4.   border-color: #ddd;
  5.   background-color: transparent;
  6.   color: #fff;
  7. }               
复制代码

　　变为圆形后，调教按钮上的文字要快速隐藏起来。
  1. .loading.progress-button span {
  2.   -webkit-transition: opacity 0.15s;
  3.   transition: opacity 0.15s;
  4. }
  5. .loading.progress-button span,
  6. .success.progress-button span,
  7. .error.progress-button span {
  8.   opacity: 0; /* keep it hidden in all states */
  9. }               
复制代码

　　JAVASCRIPT
　　在javascript代码中，button是HTML元素，progressEl是SVG元素，它是代表圆形的进度条。successEl和errorEl分别代表提交成功和失败的标记，也是SVG元素。js代码中通过UIProgressButton()方法来初始化这个提交按钮特效。
  1. function UIProgressButton( el, options ) {
  2.   this.el = el;
  3.   this.options = extend( {}, this.options );
  4.   extend( this.options, options );
  5.   this._init();
  6. }

  8. UIProgressButton.prototype._init = function() {
  9.   this.button = this.el.querySelector( 'button' );
  10.   this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );
  11.   this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );
  12.   this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );
  13.   // init events
  14.   this._initEvents();
  15.   // enable button
  16.   this._enable();
  17. }              
复制代码
　　其它js代码请参考下载文件。

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/html5/SVG/201507172244.html

上一篇：HTML5 CANVAS：绘制渐变色 下一篇：HTML5 CANVAS：绘制文字

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权