LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Message

CSS
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
/* Change this value to change the size */
/*E63531*/
body {
  background: #252527;
}

*:before, *:after {
  content: '';
  position: absolute;
}

.bg, .msg, .fg {
  position: absolute;
}

.mail {
  font-size: 2.5em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4em;
  height: 2.5em;
  background: red;
  /* end of bg */
  /* end of msg */
  /* end of fg */
}
.mail .bg {
  width: 4em;
  height: 2.5em;
  background: #878787;
  box-shadow: 0 0 1em #000;
}
.mail .bg:before {
  height: 0;
  width: 0;
  border: 2em solid transparent;
  border-top-width: 0;
  border-bottom: 0 solid gray;
  bottom: 2.5em;
  left: 0;
  transition: all ease-in 0.1s;
  transition-delay: 0.1s;
}
.mail .msg {
  width: 3.6em;
  height: 2.25em;
  background: #fff;
  left: 0.2em;
  bottom: 0.125em;
  transition: all ease-in 0.1s;
  transition-delay: 0;
}
.mail .msg p {
  color: #222;
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-family: sans-serif;
  font-family: 'Shadows Into Light Two', cursive;
  text-align: center;
}
.mail .fg {
  width: 1em;
  height: 0;
  border-width: 1.25em 1.5em;
  border-style: solid;
  border-color: transparent #a8a8a8 #aeaeae;
}
.mail .fg:after {
  height: 0;
  width: 0;
  border: 2em solid transparent;
  border-top: 1.875em solid #bababa;
  border-bottom-width: 0;
  left: -1.5em;
  top: -1.25em;
  transition: all ease-out 0.1s;
  transition-delay: 0.2s;
}

/* end of mail*/
.mail:hover .bg:before {
  border-bottom-width: 1.625em;
  transition: all ease-in 0.1s;
  transition-delay: 0.1s;
}

.mail:hover .msg {
  /*top: -$height * 0.65;*/
  height: 3.75em;
  transition: all ease-out 0.1s;
  transition-delay: 0.2s;
}

.mail:hover .fg:after {
  border-top-width: 0;
  transition: all ease-out 0.1s;
  transition-delay: 0;
}
JS
// Check your mail! :)
Host Instantly Drag and Drop Website Builder

 

Description

Playing around with transitions and changing the order of the transitions when you move the mouse away by having a transition attribute in both the normal and hover states.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID