* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
/*设置字体，颜色，字号*/
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
/* css3对角线渐变色 */
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
/* 透明度设置*/
opacity: 0.8;
/* 位于当前视口的正中间*/
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
/* 滚动条隐藏*/
overflow: hidden;
}
.container {
/* 登陆部分垂直居中*/
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
/* 让过渡效果持续 1 秒*/
-webkit-transition-duration: 1s;
transition-duration: 1s;
/* 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42, 0, 0.58, 1)）。*/
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
/* 去除浏览器(IE 谷歌等)默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*无边框*/
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
/*圆角*/
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
/* 让过渡效果持续 0.25s 秒*/
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
/* 鼠标悬停的效果*/
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
/* 焦点在上面时的效果*/
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
/* 去除浏览器(IE 谷歌等)中按钮的默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 无表框*/
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
/* 鼠标悬停时变成小手的样式*/
cursor: pointer;
font-size: 18px;
/* 让过渡效果持续 0.25s 秒*/
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
