input输入动画
- 介绍
- 代码
- HTML
- CSS
CSS动画04--input输入框
介绍
此动画是当点击input框内部外部不同的动画，以上是鄙人录制得一个小视频，供大家参考，🤭
代码
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); */background: linear-gradient(200deg,#ddd6f3,#faaca8);/* 200deg,#ddd6f3,#faaca8 */
}
.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; */color: #faaca8;
}
.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; */background-color: #faaca8;/* 沿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);
}
