jQuery和CSS3创意表单提交按钮动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

制作方法

HTML结构

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

<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平滑过渡效果。

#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平滑过渡效果。

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，并设置了一个圆角。

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%。这样便制作出了按钮转换为进度条并开始动画的效果。

#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会使进度条转换为圆形的图标。

(function () {
    'use strict';
    var $button = $('button');
    $button.on('click', function () {
        $(this).parent().addClass('clicked').delay(2600).queue(function () {
            $(this).addClass('success');
        });
    });
}());