<div class="bg">
<div class="form-box bounceIn">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/User_icon_2.svg/1024px-User_icon_2.svg.png"
class="form-img">
<div class="form-content">
<h5>Login</h5>
<label for="username"><b>username</b></label>
<input type="text" name="username">
<label for="password"><b>password</b></label>
<input type="password" name="password">
<a href="#">Forgot you password?</a><br><br>
<a href="#">Sign in</a>
</div>
</div>
</div>
body, html {
height: 100%;
margin: 0;
}
.bg{
background: url(https://w.wallhaven.cc/full/96/wallhaven-96ymj1.jpg);
height: 100%;
background-position: center;
background-size: cover;
}
.form-box{
width:300px;
height:360px;
background:rgba(0,0,0,0.8);
position:absolute;
/*centrar el cuadro del formulario*/
top: calc(50vh - 180px);
left:calc(50vw - 100px);
}
.form-img {
width: 200px;
height: 200px;
position:absolute;
top: -100px;
left: calc(150px - 100px);
}
.form-content{
width: 90%;
margin: 0 auto;
margin-top:100px;
color: white;
}
.form-content h5{
text-align:center;
font-size: 1.2em;
}
.form-content label{
color: white;
}
.form-content input{
width:100%;
background:rgba(0,0,0,0);
border:none;
border-bottom: 1px solid #00ddff;
margin:10px 0 10px;
}
.form-content a{
color:#888888;
text-decoration:none;
}
/*animacion con bounceInde animate.css*/
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.