前言
常见的input 框输入动画,点击后出现标题,隐藏placeholder
提示:以下是本篇文章的代码内容,供大家参考,相互学习
一、html代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>有点小酷的input输入动画</title>
<link rel="stylesheet" href="../css/4.css">
</head>
<body>
<div class="wrapper">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label>您的姓名</label>
</div>
</div>
</body>
</html>
二、css
代码如下:
*{
margin: 0;
padding: 0;
outline: none;
/* 这个属性是告诉浏览器:你想要设置的边框和内边距的值是包含在总宽高内的 */
box-sizing: border-box;
}
body{
/* 弹性布局 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置body最小高度为100%窗口高度 */
min-height: 100vh;
/* 渐变背景 */
background: linear-gradient(200deg,#0c3483,#a2b6df);
}
.wrapper{
width: 450px;
background-color: #fff;
/* 内边距(上下左右) */
padding: 40px;
/* 盒子阴影 */
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
/* 圆角 */
border-radius: 8px;
}
.wrapper .input-data{
/* 相对定位 */
position:relative;
width: 100%;
height: 40px;
}
.wrapper .input-data input{
width: 100%;
height: 100%;
border:none;
font-size: 17px;
border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.wrapper .input-data input:focus ~ label,
/* 输入框的值为合法时 */
.wrapper .input-data input:valid ~ label{
/* label上移,同时改变字号、字体颜色 */
transform: translateY(-25px);
font-size: 15px;
color: #2c6fdb;
}
.wrapper .input-data label{
/* 绝对定位 */
position: absolute;
bottom: 10px;
left: 0px;
color: #808080;
/* 这个属性可以使点击label穿透到输入框 */
pointer-events: none;
/* 现在动画有点生硬,在这里需要给动画加个过渡 */
transition: all 0.3s ease;
}
.wrapper .input-data .underline{
position: absolute;
bottom: 0px;
height: 2px;
width: 100%;
background-color: #2c6fdb;
/* 沿X轴缩小 */
transform: scaleX(0);
/* 这里同样给动画加个过渡 */
transition: all 0.3s ease;
}
.wrapper .input-data input:focus ~ .underline,
.wrapper .input-data input:valid ~ .underline{
/* 沿X轴放大 */
transform: scaleX(1);
}
总结
- pointer-events: none; 设置元素不响应元素,看得见摸不着,
- pointer-events 属性定义元素是否对指针事件做出反应。 可选:
- auto:默认值。元素对指针事件做出反应,比如 :hover 和 click。
- none:元素不对指针事件做出反应。
- initial:将此属性设置为其默认值。
- inherit:从其父元素继承此属性。
- input:focus 选择器:选择已被选中的input