（详细）简单登录页面 html&css&jq_(".txtb input").on("focus",function(){ $(this).add-CSDN博客

本文链接：https://blog.csdn.net/YFirst_/article/details/105333036

（详细）简单登录页面 html&css&jq

具体效果
你可能要了解的内容
- html5-自定义元素属性data-和content的attr用法
- 伪元素
详细代码部分
- html部分
总结

具体效果

是不是很简单~

你可能要了解的内容

html5-自定义元素属性data-和content的attr用法

https://blog.csdn.net/qq_34708564/article/details/90302305

伪元素

https://www.w3school.com.cn/css/css_pseudo_elements.asp

详细代码部分

html部分

第一步当然是引入外部样式和jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <link rel="stylesheet" href="./CSS/1.login.css">
  <script src="jquery-1.12.4.js"></script>
  
  <title>login</title>
</head>

搭建出基本结构

		<!-- 这里创建一个表单 将它的样式类名设置为login-form -->
  <form action="" class="login-form">
    <h1>Login</h1>
	<!-- 这里创建用户名框 -->
    <div class="txtb">
      <input type="text">
      <!-- 这里给span标签自定义一个占位符，为了之后的小效果 -->
      <span data-placeholder="Username"></span>
    </div>
  <!-- 这里创建密码框 -->
    <div class="txtb">
      <input type="password">  
      <span data-placeholder="Password"></span>
    </div>
	<!-- 搭建登录按钮和注册连接 -->
    <input type="submit" class="logbtn" value="Login">
    <div class="bottom-text">
      Don't have account? <a href="#">Sign up</a>
    </div>
  </form>

###css样式

*{
  /* 国际惯例 */
  margin: 0;
  padding: 0;
  /* 去除文本修饰 */
  text-decoration: none;
  font-family: montserrat;
  box-sizing: border-box;
}

body{
  /* 把body的最小高度设置成当前视口的高度 */
  min-height: 100vh;
  /* 渐变 */
  background-image: linear-gradient(120deg,#3498db,#8e44ad);
}

.login-form{
  width: 360px;
  background: #f1f1f1;
  height: 580px;
  padding: 80px 40px;
  border-radius: 10px;
  /* 居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.login-form h1{
  text-align: center;
  margin-bottom:60px;

}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}


.txtb input{
  /* 字体 */
  font-size: 15px;
  /* 把inut自带的白色背景去掉 */
  background: none;
  /* 字体颜色 */
  color: #333;
  /* 不要边框 */
  border: none;
  width: 100%;
  outline: none;
  padding: 0 5px;
  height: 40px;
}
/* 使用伪元素添加自定义属性 */
.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
/* 设定上升效果 */
  transform: translateY(-50%);
  /* 为了防止被选中 */
  z-index: -1;
  /* 这里设置过渡效果 */
  transition: .5s;
}
/*利用伪元素在span下面添加一个2px的进度渐变效果 */
.txtb span::after{
  display: block;
  content: '';
  position: absolute;
  width: 0%;
  height: 20px;
  background: linear-gradient(120deg,#3498db,#8e44ad);
  transition: .5s;
}

.focus + span::before{
  top: -5px;
}

.focus + span::after{
  width: 100%;
}
/* 设置按钮样式，原理同上 */
.logbtn{
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background:linear-gradient(120deg,#3498db,#8e44ad,#3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
}

.logbtn:hover{
  background-position: right;
}

.bottom-text{
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
}

js部分

  <script>
    // 利用jquery监听 焦点 和 失焦两个事件来动态设置样式控制效果
    $(".txtb input").on("focus",function(){
      $(this).addClass("focus")
    })
    $(".txtb input").on("blur",function(){
      if($(this).val() == "")
      $(this).removeClass("focus")
    })
  </script>