* {
	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);
}