八个值得学习的登录表单

一个好看的前端页面，在开发中总会让人赏心悦目。实现起来其实并不难，只要你发现其中的原理和规律，一起来学习下面这些优秀的表单界面吧，最后附带源码获取方式！

表单1：使用emoji表情的变化来检验，密码的合法性

 

当密码超过六个字符，表情就会变换，这需要在input的pattern属性设置正则表达式：

<form>
      <div class="form__field">
        <input type="password" class="form__input" pattern=".{6,}" required />
        <span class="icon"></span>
      </div>
    </form>

css核心如下：

.form__input:valid + .icon::after {
  content: '😃';
}

.form__input:invalid {
  border-color: firebrick;
}

.form__input:invalid + .icon::after {
  content: '😳';
}

---

表单2：input的浮动标签

  设置placeholder-shown伪类来实现浮动标签

/*当input框内placeholder没有显示的时候，label标签上移*/
.floating-label input:not(:placeholder-shown) + label {
  transform: translateY(-10px); 
  opacity: 0.7;
}

/* 当光标悬浮于按钮之上 */
button:hover {
  transform: translateY(-3px);  /*整个按钮上移3px*/
  box-shadow: 0 2px 6px -1px rgba(182, 157, 230, 0.65);  /*设置盒子阴影*/
}

---

表单3：三维动画切换功能

  

---

表单4：元素的隐藏与卡片滑动

注：button按钮可设置outline:none来隐藏点击时的边框

  

---

  表单5：波浪登录表单

  

---

表单6：input的浮动标签2

实现核心css源码

input:hover::placeholder, input:focus::placeholder, input:active:focus::placeholder {
  color: #ff5722;
  position: relative;  /*相对定位*/
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

---

表单7：动态输入框+背景

核心css代码

/* 当光标移到到输入框时 */
form input:hover {
  background-color: rgba(255, 255, 255, 0.4);  /* 背景颜色变深*/
}

/* 当点击输入框时 */
form input:focus {
  background-color: white;   /* 背景色变白色*/
  width: 300px;  /* 输入框长度增加 */
  color: #53e3a6;  /* 设置文字颜色*/
}

---

表单8：邮箱验证表单

不知道小伙伴们对以上哪种表单的风格最为喜欢（评论区炸起来），赶快自己动手试着去敲一遍，实现自己想要的效果！

源码获取方式->>  关注《源码小客栈》，回复关键字："表单源码"，即可获取链接