<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.