jQuery和CSS3创意表单提交按钮动画特效

按钮 提交按钮 2015-06-11

控件介绍
这是一款非常有创意的jQuery和CSS3表单提交按钮动画特效。该提交按钮在用户点击的时候会转换为一个进度条,用以表示当前提交的进程,当提交结束后,进度条优惠转换为一个圆形的成功符号,效果非常酷。
浏览器兼容

支持IE10+

演示下载 942
使用方法

制作方法

HTML结构

该提交按钮特效的HTML结构使用一个<div>来包裹一个按钮。按钮中div.fill是进度条元素,.fa-check是font-awesome图标,这是提交成功后的圆形图标。

1
2
3
4
5
6
7
<div id="button-wrapper">
    <button>
        <p>Upload Something</p>
        <div class="fill"></div>
        <div class="fa fa-check"></div>
    </button>
</div>
CSS样式

该提交按钮特效的按钮包裹元素#button-wrapper被绝对定位到屏幕中间,宽度设置为450像素,并添加了ease平滑过渡效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
#button-wrapper {
    width: 450px;
    text-align: center;
    padding: 0 100px;
    box-sizing: border-box;
    -webkit-transition: .3s all ease .3s;
    transition: .3s all ease .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}             

按钮元素使用相对定位,设置了一个大圆角和ease平滑过渡效果。

1
2
3
4
5
6
7
8
9
10
11
button {
    width: 100%;
    background: #8e44ad;
    border: none;
    border-radius: 50px;
    padding: 5px 0;
    cursor: pointer;
    -webkit-transition: .3s all ease;
    transition: .3s all ease;
    position: relative;
}             

进度条.fill元素使用绝对定位,开始时宽度被设置为0,并设置了一个圆角。

1
2
3
4
5
6
7
8
9
10
button .fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0%;
    background: #8e44ad;
    border-radius: 50px;
}            

该提交按钮特效中使用jQuery来处理按钮的点击事件,在按钮被点击的时候,它的父元素被添加了clicked class。在clicked样式中,按钮上的文字被隐藏,按钮的高度被减小到25px,进度条的宽度被设置为100%。这样便制作出了按钮转换为进度条并开始动画的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#button-wrapper.clicked {
    padding: 0;
}
 
#button-wrapper.clicked button {
    background: #ccc;
    margin-top: 25px;
}
 
#button-wrapper.clicked button p {
    max-height: 0;
    overflow: hidden
}
 
#button-wrapper.clicked button .fill {
    width: 100%;
    -webkit-transition: .3s all ease .3s;
    transition: 2s all ease .6s;
}               

最后进度条转换为圆形图标的原理基本类似,具体请参考源文件代码。

JAVASCRIPT

该进度条特效中使用jQuery来处理按钮的点击事件,在按钮被点击的时候为它的父元素添加.clicked class,并在延迟2600毫秒后为按钮添加.success class。.clicked class或激活进度条动画,.success class会使进度条转换为圆形的图标。

1
2
3
4
5
6
7
8
9
(function () {
    'use strict';
    var $button = $('button');
    $button.on('click', function () {
        $(this).parent().addClass('clicked').delay(2600).queue(function () {
            $(this).addClass('success');
        });
    });
}());               

本文转载请注明出处:http://www.zhuiye.com/detail_19.html
评论区
  • 还没有评论,快来抢沙发吧!