Crazy Chicken (Hey-Hey)

crazy-chicken-hey-hey.markdown

Crazy Chicken (Hey-Hey)

Hey-Hey Just and Fun css chick with hover effect :)

A Pen by Andrej Sharapov on CodePen.

License.

index.haml

.chick
  .face
    .eyes
      .eye.right
      .eye.left
    .head
      .tuft
      .beak
  .neck
  .body
  .paws
    .paw.right
    .paw.left
  .tail
  .shadow
  
%h1 Hover on the ChicK

script.js

// https://twitter.com/andrejsharapov
// https://dribbble.com/andrejsharapov

style.scss

$tuft: #9f1c21;
$_eye: #dcdfd8;
$beak: #ffc969;
$body: #005467;
$tail: #005467;

$width: 10px;

$color: #424242; 

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: #1d1e22;
}

.chick {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;

  &:hover {
    .face {
      transform: scale(4);
      animation: shake 100ms infinite;
      .eyes {
        .eye::before {
          animation-play-state: paused;
        }
      }
    }
  }
}

.face {
  position: relative;
  width: $width * 5;
  height: $width * 7;
  border-radius: 50%;
  background-color: $beak;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);

  .eyes {
    position: absolute;
    top: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: center;

    .eye {
      position: relative;
      z-index: 3;
      width: $width * 4;
      height: $width * 4;
      border: 4px solid $tuft;
      border-radius: 50%;
      background-color: $_eye;
      box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.1);

      &::before {
        position: absolute;
        width: $width;
        height: $width;
        content: "";
        border-radius: 50%;
        background-color: black;
      }

      &.right {
        margin-left: -$width * 2;
        &::before {
          top: 50%;
          left: $width;
          animation: eyer 3s infinite ease-in-out;
        }
      }

      &.left {
        margin-right: -$width * 2;
        &::before {
          top: 30%;
          right: $width / 2;
          animation: eyel 3s infinite ease-in-out;
        }
      }
    }
  }

  .head {
    position: absolute;
    top: 0;
    z-index: 1;
    width: $width * 5;
    height: $width * 4;
    background-color: $tuft;
    border-radius: 80%;

    .tuft {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      width: $width * 1.5;
      height: $width * 4;
      border-radius: 50% 50% 10% 10%;
      background: linear-gradient(0deg, $tuft 50%, lighten($tuft, 25%));
    }

    .beak {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      z-index: 1;
      width: $width * 2;
      height: $width * 2;
      border: 2px solid $tuft;
      border-radius: 15% 50%;
      background-color: darken($beak, 15%);

      &::before,
      &::after {
        position: absolute;
        width: $width / 2;
        height: $width * 3;
        content: "";
        transform: rotate(-45deg);
        border-radius: 100%;
        background-color: $tuft;
      }
      &::before {
        top: 7px;
        left: 7px;
      }
      &::after {
        top: -5px;
        left: 20px;
      }
    }
  }
}

.neck {
  position: relative;
  margin-top: -$width * 2;
  z-index: -1;
  width: $width * 3;
  height: $width * 9;
  border-radius: 70% 70% 60% 60% / 35% 35% 55% 55%;
  background: linear-gradient(0deg, transparent, $beak, $beak);
  box-shadow: inset 0 15px 10px rgba(0, 0, 0, 0.2);
}

.body {
  position: relative;
  margin-top: -50px;
  z-index: -2;
  width: 100px;
  height: 130px;
  background-color: $body;
  border-radius: 50%;

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 70px;
    height: 100px;
    content: "";
    border-radius: 100%;
    background: radial-gradient(circle at 50% 0%, orange, transparent);
  }
}

.paws {
  position: relative;
  margin-top: -20px;
  z-index: -3;
  display: flex;
  justify-content: space-around;
  width: 100px;
  height: 80px;
  .paw {
    height: 100%;
    width: 15px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, orange, $beak);
  }
}

.tail {
  position: absolute;
  z-index: -4;
  width: $width;
  height: $width * 10;
  transform-origin: 0 100%;
  transform: rotate(-65deg);
  background-color: $tail;
  
  &::before,
  &::after {
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: 0% 100%;
    transform: rotate(-75deg);
    content:'';
    border-radius: 50%;
    background-color: darken($tail, 5%);
  }
  &:after {
    transform: rotate(25deg);
  }
}

.shadow {
  position: relative;
  margin-top: -10px;
  z-index: -4;
  width: 150px;
  height: 20px;
  border-radius: 50%;
  background-color: $color;
}

@keyframes eyel {
  0% {
    transform: translate(0px, 0px);
  }
  30% {
    transform: translate(-10px, -5px);
  }
  60% {
    transform: translate(-5px, 0px) 
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes eyer {
  0% {
    transform: translate(0px, -5px);
  }
  30% {
    transform: translate(5px, 5px);
  }
  60% {
    transform: translate(-5px, 0px);
  }
  100% {
    transform: translate(0, -5px);
  }
}

@keyframes shake {
  10%,
  90% {
    margin-left: -$width;
  }

  20%,
  80% {
    margin-right: -$width;
  }

  30%,
  50%,
  70% {
    margin-left: $width;
  }

  40%,
  60% {
    margin-right: $width;
  }
}

h1 {
 text-transform: uppercase;
  font-size: 0.825rem;
  color: darken($_eye, 35%);
}