Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

PHP中文网
Freigeben: 2016-05-17 09:07:33
Original
2615 Leute haben es durchsucht

简要教程

这是一款非常实用的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>
Nach dem Login kopieren

CSS样式

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

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

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

.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;
}
Nach dem Login kopieren

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

.progress-button button:hover {
  background-color: #1ECD97;
  color: #fff;
}
Nach dem Login kopieren

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

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

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

.progress-button svg path {
  opacity: 0;
  fill: none;
}
Nach dem Login kopieren

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

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

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

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

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

.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 */
}
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage