简要教程
这是一款非常实用的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>
CSS样式
首先提交按钮容器需要设置为inline-block样式。
.progress-button { position: relative; display: inline-block; text-align: center; }
然后在为提交按钮提供一些基本样式,并设置过渡动画效果。
.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: 'Montserrat', 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; }
在鼠标滑过提交按钮的时候,修改按钮的背景颜色和文字颜色。
.progress-button button:hover { background-color: #1ECD97; color: #fff; }
所有的SVG元素都采用绝对定位方式来居中对齐,并且不允许有任何的pointer-events。
.progress-button svg { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; }
SVG的路径没有任何的填充色,只有描边。开始的时候它们是被隐藏起来的,透明度被设置为0。
.progress-button svg path { opacity: 0; fill: none; }
圆形进度条通过设置描边为5个单位来创建。
.progress-button svg.progress-circle path { stroke: #1ECD97; stroke-width: 5; }
当开始loading线程的时候,按钮会变形为圆形,和圆形进度条相同的大小。
.loading.progress-button button { width: 70px; /* 制作一个圆形 */ border-width: 5px; border-color: #ddd; background-color: transparent; color: #fff; }
变为圆形后,调教按钮上的文字要快速隐藏起来。
.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 */ }
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( 'button' ); this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) ); this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) ); this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) ); // init events this._initEvents(); // enable button this._enable(); }
其它js代码请参考下载文件。
以上就是HTML5 SVG带圆形进度条动画的提交按钮特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!