Emoji wow | Pure CSS

emoji-wow-pure-css.markdown

Emoji wow | Pure CSS

Experimenting with CSS.

SCSS preprocessor added to allow use of variables, and pug for easy declaration of all the div classes.

Responsive. Animated

A Pen by Maya Opperman on CodePen.

License.

index.pug

.box
  .head
    .eye.left-eye
      .eye-ball.left-eye-ball
    .eye.right-eye
      .eye-ball.right-eye-ball
    .mouth
      .tongue

style.scss

body {
  background: LightBlue;
}

.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
  //test border: solid 4px red;
}

.head {
  position: absolute;
  top: 16.5%;
  left: 25%;
  width: 50%;
  height: 67%;
  background: yellow;
  border-radius: 50%;
}

.eye {
  position: absolute;
  background: white;
  width: 25%;
  height: 25%;
  top: 25%;
  border-radius: 50%;
}

.right-eye {
  left: 21%;
}

.left-eye {
  right: 21%;
}
.eye-ball {
  position: absolute;
  width: 28%;
  height: 30%;
  top: 35%;
  left: 36%;
  border-radius: 50%;
  background: #27354a;
  animation: doPupilWow 3s infinite;
}

.mouth {
  position: absolute;
  background: #27354a;
  width: 24%;
  height: 30%;
  bottom: 15%;
  left: 38%;
  border-radius: 50%;
  z-index: 2;
  animation: doWow 3s infinite;
}

.tongue {
  position: absolute;
  background: pink;
  width: 40%;
  height: 35%;
  top: 60%;
  right: 15%;
  border-radius: 50%;
}

@media screen and (max-width: 500px) {
  .box {
    margin-top: 1%;
    width: 300px;
    height: 210px;
  }
}

@keyframes doWow {
  0% {
    width: 3%;
    height: 4%;
    
  }
  50% {
    width: 24%;
    height: 30%;
    
  }
  100% {
    width: 3%;
    height: 4%;
    
  }
}

@keyframes doPupilWow {
  0% {
  top: 0%;
  left: 0%;
    
  }
  50% {
  top: 6;
  left: 30;
    
  }
 
  100% {
    top: 35%;
    left: 36%;
    
  }
}