当前位置：首页 > 网页特效 > 动画效果

Material Design风格提交表单UI设计

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
这个提交表单使用foundation框架来布局。通过网格来排列表单中的各种元素。

...
```html
<form>
  <div class="row">
    <div class="small-4 columns">
    <p class="notice">Simple input </p>
    </div>
    <div class="small-8 columns">
      <div class="form-group-material">
      <label class="material-label" for="name">Name</label>
      <input class="material-field" id="name" required="required" type="text" />
      </div>
    </div>
  </div>
  ...
  <div class="row">
    <div class="small-12 small-push-4 columns">
      <button>Send it !</button>
    </div>
  </div>
</form>
...     
```       
#####  CSS样式
该Material Design风格的提交表单的CSS样式非常简单。其中浮动标签使用CSS3 translateY属性来移动标签。开始的时候，标签被移动到-50%的地方，在输入框聚焦的时候，标签被移动到-220%的地方，并缩小到0.82。

```html
.material-label {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  line-height: 1;
  cursor: text;
  color: #b3b3b3;
  -webkit-transition: -webkit-transform ease 0.3s, color ease 0.3s;
          transition: transform ease 0.3s, color ease 0.3s;
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}
.focused .material-label {
  -webkit-transform: translateY(-220%) scale(0.82);
      -ms-transform: translateY(-220%) scale(0.82);
          transform: translateY(-220%) scale(0.82);
  color: #E91E63;
}     
```        
#####  JAVASCRIPT
该Material Design风格的提交表单使用jQuery代码在表单聚焦时为相应的元素添加和删除相应的class。

```html
(function () {
    var materialForm;
    materialForm = function () {
        return $('.material-field').focus(function () {
            return $(this).closest('.form-group-material').addClass('focused has-value');
        }).focusout(function () {
            return $(this).closest('.form-group-material').removeClass('focused');
        }).blur(function () {
            if (!this.value) {
                $(this).closest('.form-group-material').removeClass('has-value');
            }
            return $(this).closest('.form-group-material').removeClass('focused');
        });
    };
    $(function () {
        return materialForm();
    });
}.call(this));   
```

web299.com

Material Design风格提交表单UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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