LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  

  
  
    
New follower
{messageTemplate}
CSS
body {
  background-color: red;
  font-family: 'Open Sans';
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}

.alert-text {
  padding: 3px 4px 4px 4px;
}

#alert-message {
  color: #fff;
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0));
  /* Standard syntax (must be last) */
  padding: 20px;
  font-weight: 300;
  text-align: center;
}

/* Grow from Center animation */
@keyframes growCenter {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* Alert box */
.alert-text-wrap {
  margin: 0 auto;
  height: 145px;
  min-width: 400px;
  animation: growCenter 1s;
}

/* Animatie lijnen */
@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes top-to-bottom {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
/* Animatie slide in */
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 0%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
.line-top {
  height: 2px;
  min-width: 400px;
  margin: 0 auto;
  background-color: #f2d141;
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.9s;
}

.line-bottom {
  height: 2px;
  min-width: 400px;
  margin: 0 auto;
  background-color: #f2d141;
  transform: scaleX(0);
  transform-origin: right;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.9s;
}

.line-left {
  width: 2px;
  top: 0px;
  float: left;
  height: 100%;
  background-color: #f2d141;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: top-to-bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.9s;
}

.line-right {
  width: 2px;
  height: 100%;
  float: right;
  background-color: #f2d141;
  transform: scaleY(0);
  transform-origin: top;
  animation: top-to-bottom cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.9s;
}

/* New follower */
#new-follower {
  background: #f2d141;
  color: #fff;
  text-align: right;
  font-family: 'Open Sans';
  font-size: 20px;
  text-transform: uppercase;
  padding: 20px;
  font-weight: 300;
  /*animation-duration: 1.5s;
  animation-name: slideIn;*/
}
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv