LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*{
  box-sizing:border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-direction:column;
  background-color: #151619;
  perspective: 1000px;
  font-family:roboto, arial, sans-serif;
}
#envelope_body {
  filter: drop-shadow(4px 4px 0px rgba(95, 114, 138, 0.8));
  min-width: 140px;
  min-height: 100px;
  position: relative;
  transition: all 0.6s ease-in-out;
}

#back {
  position: absolute;
  background-color: #8593ab;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#front {
  position: absolute;
  background-color: #b0bdc6;
  width: 100%;
  height: 100%;
  z-index: 2;
  clip-path: polygon(50% 45%, 100% 0, 100% 100%, 0 100%, 0 0);
}
#front_2 {
  position: absolute;
  background-color: #cad5dd;
  width: 100%;
  height: 100%;
  z-index: 2;
  clip-path: polygon(0% 100%, 50% 40%, 100% 100%);
}
#opening {
  position: absolute;
  background-color: #dfe9ef; /*d9cfca*/
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 100% 10%, 50% 45%, 0 10%, 0 0);
  z-index: 4;
  transform-origin: 50% 0;
  transition-property: transform, z-index;
  transition-duration: 0.8s, 0s;
  transition-timing-function: ease, ease;
  transition-delay: 0s, 0.2s;
}

#envelope_body:hover #opening {
  transform: rotateX(200deg);
  z-index: 1;
}

#card {
  position: absolute;
  padding:20px;
  z-index: 1;
  width: 80%;
  height: 50%;
  background-color: white;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  transition-property: transform, height;
  transition-duration: 0.4s, 0.6s;
  transition-timing-function: ease, ease;
  transition-delay: 0.4s, 0s;
  clip-path: polygon(15px 0, 0 15px, 0 100%, 100% 100%, 100% 0);
}
#envelope_body:hover #card {
  transform: translateY(-50%);
  height: 100%;
}
#envelope_body:hover {
  transform: translateZ(200px) rotateX(-30deg);
  filter: drop-shadow(6px 12px 0px rgba(95, 114, 138, 0.2));
}

#corner {
  position:absolute;
  top:0;
  left:0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 15px;
  border-color: transparent transparent #dfe9ef transparent;
}

.title{
  background-color:#87a3b2;
  height:4px;
  width:40%;
  margin-bottom:10px;
}

.line{
  background-color:#87a3b2;
  height:4px;
  width:100%;
  margin-bottom:10px;
}

.tip{
  margin-top:40px;
  font-size:18px;
  font-weight:600;
  opacity:0.8;
  
}
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv