html5注册页面样式,HTML5一款小清新风格的登录/注册表单界面模板

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400");

@import url("https://fonts.googleapis.com/css?family=Playfair+Display");

body,

.message,

.form,

form {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

body {

height: 100vh;

background: #E8E8E8;

font-family: "Source Sans Pro", sans-serif;

overflow: hidden;

}

.container {

width: 700px;

height: 400px;

background: white;

position: relative;

display: grid;

grid-template: 100% / 50% 50%;

box-shadow: 2px 2px 10px 0 rgba(51, 51, 51, 0.2);

}

.message {

position: absolute;

background: white;

width: 50%;

height: 100%;

transition: 0.5s all ease;

transform: translateX(100%);

z-index: 4;

}

.message:before {

position: absolute;

content: '';

width: 1px;

height: 70%;

background: #C3C3D8;

opacity: 0;

left: 0;

top: 15%;

}

.message .button {

margin: 5px 0;

}

.signup:before {

opacity: 0.3;

left: 0;

}

.login:before {

opacity: 0.3;

left: 100%;

}

.btn-wrapper {

width: 60%;

}

.form {

width: 100%;

height: 100%;

}

.form--heading {

font-size: 18px;

height: 50px;

color: #809BCE;

font-family: 'Playfair Display', serif;

}

form {

width: 70%;

}

form > * {

margin: 10px;

}

form input {

width: 90%;

border: 0;

border-bottom: 1px solid rgba(195, 195, 216, 0.5);

font-size: 13px;

font-weight: 300;

color: #797A9E;

letter-spacing: 0.11em;

}

form input::placeholder {

color: #C3C3D8;

font-size: 10px;

}

form input:focus {

outline: 0;

border-bottom: 1px solid rgba(128, 155, 206, 0.7);

transition: 0.6s all ease;

}

.button {

width: 100%;

height: 30px;

border: 0;

outline: 0;

color: white;

font-size: 15px;

font-weight: 300;

position: relative;

z-index: 3;

letter-spacing: 2px;

background: linear-gradient(45deg, #809BCE, #9893DA);

font-family: 'Playfair Display', serif;

}

.button:hover {

transform: translateY(4px);

transition: 0.4s all ease;

}

@media (max-width: 750px) {

.container {

transform: scale(0.8);

}

}