CSS输入框选中效果

来源:https://www.sucaihuo.com/js/2280.html 2017-07-02 17:52浏览(1673) 收藏

一款简约而不简单的输入框选中特效,提示文字会动画缩小,并移动到输入框的顶部,底部边框会有一个蓝色线条填充的动画特效,另外,登录按钮也有一个鼠标悬停的变色效果,可以直接拿来用,喜欢的就收下吧。
CSS输入框选中效果
分类:表单代码 > 输入框 难易:入门级
查看演示 下载资源 下载积分: 20 积分

页面的head部分需要设置好CSS样式,由于难度不大,以下直接提供代码:

body {
  font-size: 20px;  
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  background: #fff;
}

form {
  width: 300px;
  margin: 20px auto;
}

fieldset {
  position: relative;
  border: none;  
}

label {
  position: absolute;
  top: 18px;
  margin-left: 15px;
  color: rgba(0, 0, 0, 0.3);
  transform-origin: left;
  transition: all 0.3s ease;
}

input:focus ~ label {
  color: #26c7fc;  
}

input:focus ~ label,
input:valid ~ label {
  top: 0;
  transform: scale(0.6, 0.6);
}

input {
  font-size: 20px;  
  width: 100%;
  border: none;  
  margin-top: 10px;
  padding: 5px 15px;
}

input:focus {
  outline: none;
}

.after {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
}

input:focus ~ .after {
  background-position: 0 0;
}

button {
  position: relative;
  width: 100%;
  font-size: 20px;  
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  line-height: 2;
  margin-top: 20px;
  padding: 3px 10px;
  color: rgba(0, 0, 0, 0.4);
  background: white;
  border: none;
  background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
  border-radius: 5px;
}

button:before {
  position: absolute;
  content: "立即登录";
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: block;
  background-color: white;
  border-radius: 3px;
}

button:active,
button:focus,
button:hover {
  outline: none;
  background-position: 0 0;
  color: #26c7fc;
}

页面的body部分用三个fieldset,分别放置不同用处的input输入框还有底部的登录按钮,比较容易读懂,代码如下:

<fieldset>
  <input id="uname" type="text" name="uname" required>
  <label for="uname">用户名</label>
  <div class="after"></div>
</fieldset>
<fieldset>
  <input id="upswd" type="text" name="upswd" required>
  <label for="upswd">密码</label>
  <div class="after"></div>
</fieldset>
<fieldset>
  <button>立即登录</button>
</fieldset>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2