.mkuang{
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置body最小高度为100%窗口高度 */
	width:100%;
	height:100vh;
    /* 渐变背景 */
   /* background: linear-gradient(200deg,#55557f96,#ececec96); */
	/* visibility: hidden; */
	z-index: 1;
}
.mkuang .mwrapper{
    width: 450px;
    background-color: #fff;
    /* 内边距（上下左右） */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    /* 圆角 */
    border-radius: 8px;
	z-index: inherit;
}
.mwrapper .mverify{
    /* 相对定位 */
    position:relative;
    width: 100%;
    height: 40px;
}
.mwrapper .mverify input{
    width: 100%;
    height: 100%;
    border:none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.mwrapper .mverify input:focus ~ label,
/* 输入框的值为合法时 */
.mwrapper .mverify input:valid ~ label{
    /* label上移，同时改变字号、字体颜色 */
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}
.mwrapper .mverify label{
    /* 绝对定位 */
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    /* 这个属性可以使点击label穿透到输入框 */
    pointer-events: none;
    /* 现在动画有点生硬，在这里需要给动画加个过渡 */
    transition: all 0.3s ease;
}
.mwrapper .mverify .lineunder{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    /* 沿X轴缩小 */
    transform: scaleX(0);
    /* 这里同样给动画加个过渡 */
   transition: all 0.5s ease;
}
.mwrapper .mverify input:focus ~  .lineunder,
.mwrapper .mverify input:valid ~  .lineunder{
    /* 沿X轴放大 */
    transform: scaleX(1);
}