HTML5 SVG带圆形进度条动画的提交按钮特效-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

PHP中文网

May 17, 2016 am 09:07 AM

简要教程

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

制作方法

HTML结构

制作这个提交按钮特效的HTML结构需要一个包裹容器，里面有一个提交按钮和三个

<div id="progress-button" class="progress-button">
  <!-- 提交按钮 -->
  <button><span>Submit</span></button>
  
  <!-- svg 圆形进度条 -->
  <svg class="progress-circle" width="70" height="70">
    <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"/>
  </svg>
  
  <!-- 提交成功的标记 -->
  <svg class="checkmark" width="70" height="70">
    <path d="m31.5,46.5l15.3,-23.2"/>
    <path d="m31.5,46.5l-8.5,-7.1"/>
  </svg>
  
  <!-- 提交失败的标记 -->
  <svg class="cross" width="70" height="70">
    <path d="m35,35l-9.3,-9.3"/>
    <path d="m35,35l9.3,9.3"/>
    <path d="m35,35l-9.3,9.3"/>
    <path d="m35,35l9.3,-9.3"/>
  </svg>
</div>

Copy after login

CSS样式

首先提交按钮容器需要设置为inline-block样式。

.progress-button {
  position: relative;
  display: inline-block;
  text-align: center;
}

Copy after login

然后在为提交按钮提供一些基本样式，并设置过渡动画效果。

.progress-button button {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  height: 70px;
  border: 2px solid #1ECD97;
  border-radius: 40px;
  background: transparent;
  color: #1ECD97;
  letter-spacing: 1px;
  font-size: 18px;
  font-family: &#39;Montserrat&#39;, sans-serif;
  -webkit-transition: background-color 0.3s, 
                      color 0.3s, width 0.3s, 
                      border-width 0.3s, 
                      border-color 0.3s;
  transition: background-color 0.3s, 
              color 0.3s, width 0.3s, 
              border-width 0.3s, 
              border-color 0.3s;
}

Copy after login

在鼠标滑过提交按钮的时候，修改按钮的背景颜色和文字颜色。

.progress-button button:hover {
  background-color: #1ECD97;
  color: #fff;
}

Copy after login

所有的SVG元素都采用绝对定位方式来居中对齐，并且不允许有任何的pointer-events。

.progress-button svg {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

Copy after login

SVG的路径没有任何的填充色，只有描边。开始的时候它们是被隐藏起来的，透明度被设置为0。

.progress-button svg path {
  opacity: 0;
  fill: none;
}

Copy after login

圆形进度条通过设置描边为5个单位来创建。

.progress-button svg.progress-circle path {
  stroke: #1ECD97;
  stroke-width: 5;
}

Copy after login

当开始loading线程的时候，按钮会变形为圆形，和圆形进度条相同的大小。

.loading.progress-button button {
  width: 70px; /* 制作一个圆形 */
  border-width: 5px;
  border-color: #ddd;
  background-color: transparent;
  color: #fff;
}

Copy after login

变为圆形后，调教按钮上的文字要快速隐藏起来。

.loading.progress-button span {
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.loading.progress-button span,
.success.progress-button span,
.error.progress-button span {
  opacity: 0; /* keep it hidden in all states */
}

Copy after login

JAVASCRIPT

在javascript代码中，button是HTML元素，progressEl是SVG元素，它是代表圆形的进度条。successEl和errorEl分别代表提交成功和失败的标记，也是SVG元素。js代码中通过UIProgressButton()方法来初始化这个提交按钮特效。

function UIProgressButton( el, options ) {
  this.el = el;
  this.options = extend( {}, this.options );
  extend( this.options, options );
  this._init();
}
  
UIProgressButton.prototype._init = function() {
  this.button = this.el.querySelector( &#39;button&#39; );
  this.progressEl = new SVGEl( this.el.querySelector( &#39;svg.progress-circle&#39; ) );
  this.successEl = new SVGEl( this.el.querySelector( &#39;svg.checkmark&#39; ) );
  this.errorEl = new SVGEl( this.el.querySelector( &#39;svg.cross&#39; ) );
  // init events
  this._initEvents();
  // enable button
  this._enable();
}

Copy after login

其它js代码请参考下载文件。

以上就是HTML5 SVG带圆形进度条动画的提交按钮特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn