当前位置：首页 > 网页特效 > 按钮特效

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

分类：按钮特效日期：2024-05-14 点击(6) 评论(0)

简介

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

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

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

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

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

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

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

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果