A Pen by survivol.

bEJou.markdown

bEJou

A Pen by survivol on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>


<!--Owl-->
<div class="owl">
  <div class="eyes"></div>
  <div class="beak"></div>
  <div class="ears"></div>
  <div class="wings"></div>
</div>
<!--
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='http://s.codepen.io/assets/editor/live/live_pen_remember_scroll.js'></script>
-->

script.js

!!console.log && console.log('v587');

style.css

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

.owl, .owl > div {
  position: absolute;
}

.owl {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 350px;
  background: #889;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 5px 0 10px #667;
  transition: transform 500ms;
}

.eyes {
  top: 90px; left: 50%;
  transform: translateX(-50%);
  &:before {
    left: -30px;
    transform: translateX(-50%);
    width: 30px; height: 30px;
    background: black;
    border-radius: 50%;
    box-shadow: -15px -5px 0 25px white, -30px -15px 0 50px #AAB;
  }
  &:after {
    left: 30px;
    transform: translateX(-50%);
    width: 30px; height: 30px;
    background: black;
    border-radius: 50%;
    box-shadow: 15px -5px 0 25px white, 30px -15px 0 50px #AAB;
  }
}

.beak {
  top: 100px; left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 75px solid black;
}

.ears {
  top: -5px; left: 50%;
  z-index: -1;
  &:before {
    left: -115px;
    width: 100px; height: 100px;
    transform: skew(30deg, 30deg);
    background: #667;
    border-radius: 25%;
  }
  &:after {
    left: 15px;
    width: 100px; height: 100px;
    transform: skew(-30deg, -30deg);
    background: #667;
    border-radius: 25%;
  }
}

.wings {
  top: 175px; left: 10px;
  width: 280px; height: 175px;
  background: #AAB;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: scale(1,-1);
  &:before {
    top: 25px; left: -25px;
    width: 130px; height: 175px;
    background: #CCD;
    border-radius: 100% 8%;
    transform: rotate(-15deg);
  }
  &:after {
    top: 25px; right: -25px;
    width: 130px; height: 175px;
    background: #CCD;
    border-radius: 8% 100%;
    transform: rotate(15deg);
  }
}

/*Mood Switch*/
#moody:checked ~ .owl .ears {
  z-index: 1;
}

label {
  font-family: 'Open Sans', Helvetica, sans-serif;
  user-select: none;
}

@media screen and (max-width:768px) {
  .owl {
    transform: translate(-50%, -50%) scale(0.75);
  }
}


/*updated*/
.owl {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 300px;
height: 340px;
background: #988;
border-radius: 3% 3% 55% 49% / 19% 21% 82% 71%;
-webkit-box-shadow: 0 5px 0 10px #600;
box-shadow: 0 5px 0 10px #600;
-webkit-transition: -webkit-transform 500ms;
transition: transform 500ms;
}
.eyes:before {
left: -30px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 30px;
height: 30px;
background: #F00;
border-radius: 5px;
-webkit-box-shadow: -15px -5px 0 25px #FFF, -30px -15px 0 50px #AAB;
box-shadow: -19px -15px 0 14px #FFF, -32px -18px 0 41px #AAB;
}
.eyes:after {
left: 30px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 30px;
height: 30px;
background: #F00;
border-radius: 5px;
-webkit-box-shadow: 15px -5px 0 25px #FFF, 30px -15px 0 50px #AAB;
box-shadow: 14px -18px 0 18px #FFF, 24px -17px 0 39px #AAB;
}

.ears{ z-index:100;}
.ears:before {
left: -217px;
top: -20px;
width: 198px;
height: 100px;
-webkit-transform: skew(30deg, 30deg);
-ms-transform: skew(30deg, 30deg);
transform: skew(30deg, 30deg);
background: #766;
border-radius: 10%;
}
.ears:after {
left: 10px;
top: -27px;
width: 218px;
height: 100px;
-webkit-transform: skew(-30deg, -30deg);
-ms-transform: skew(-30deg, -30deg);
transform: skew(-30deg, -30deg);
background: #766;
border-radius: 10%;
}

.beak {
top: 100px;
left: 33%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
transform: rotate(180deg);
z-index: -1;
border-left: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
border-top: 287px solid #662E2E;
border-radius: 31%;
}
.wings {
top: 175px;
left: 10px;
width: 280px;
height: 175px;
/* background: #BAA; */
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
display: none;
}