浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2016-07-13

人气5040

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

制作方法

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');
        });
    });
}());                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:40.54KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1864.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3创意表单提交按钮动画特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)