.holder
  .bear
    h1.bear__eyes
      span.bear__nose
        h2.lines
 
View Compiled
@import url('https://fonts.googleapis.com/css?family=Lobster');

// colors
$black: #000;
$bg1: #f4a835;
$bg2: #f7e036;
$bgFooter: #281d13;
$bgEyes: $black;
$bgNoseCenter: $black;
$eyes: #3ee9ef;
$bgBear: #6b3910;
$bgBearLight: #AD6830;
$bgNose: #eeede9;
$bgNose2: #e0dbc9;

// mixins
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

// animations
@keyframes noseAnimateBefore {
  0%, 60% { height: 110px; }
  30%, 100% { height: 120px; }
}

@keyframes noseAnimate {
  0%, 60% { height: 52px; }
  30%, 100% { height: 60px; }
}

@keyframes noseAnimateAfter {
  0%, 60% { top: 50px; }
  30%, 100% { top: 57px; }
}

@keyframes earAnimate {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-2px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(2px, 0, 0);
  }
}

// style
html {
  height: 100%;
  background: $bg1;
  background-image: radial-gradient($bg1, $bg2);  
  overflow: hidden;
}

.holder {
  @include size(280px, 280px);
  margin: 5% auto 0;
  display: block;
  position: relative; 
  transition: 1s all;
  
  &::before {
    @include size(100%, 100%);
    content: '';
    position: absolute;
    background-image: linear-gradient($bgBear, $bgBearLight);
    border-radius: 100%;   
    box-shadow: -3px 3px 20px 0px rgba(#211e17, .30);
  }  
  
  &--rotate {    
    transform: rotate(360deg) scale(2);
  }
    
}
  
.bear {
  position: relative;
  width: 100%;
  
  &::before {
    @include size(100px, 120px);
    content: '';
    position: absolute;
    background-image: linear-gradient($bgBear, $bgBearLight);
    top: -10px;
    left: -40px;
    border-radius: 100%;     
    z-index: -1;
    animation: earAnimate 2s infinite;    
  }

  &::after {
    @include size(100px, 120px);
    content: '';
    position: absolute;
    background-image: linear-gradient($bgBear, $bgBearLight);
    top: -10px;
    right: -40px;
    border-radius: 100%;    
    z-index: -1;
    animation: earAnimate 3s infinite;
  }
  
  &__eyes {
    position: relative;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    color: $eyes;      

    &::before {
      @include size(25px, 25px);
      content: '●';
      position: absolute;
      background: $bgEyes;
      top: 95px;
      left: 30px;
      border-radius: 100%;      
      z-index: 1;      
    }

    &::after {
      @include size(25px, 25px);
      content: '●';
      position: absolute;
      background: $bgEyes;
      top: 95px;
      right: 30px;
      border-radius: 100%;      
      z-index: 1;
    }  
  }

  &__nose{
    @include size(120px, 120px);
    position: relative;
    background-image: linear-gradient($bgNose, $bgNose2);
    display: inline-block;
    margin-top: 100px; 
    border-radius: 100%;
    animation: noseAnimateBefore 2s infinite; 

    &::before {
      @include size(80px, 60px);
      content: '';
      position: absolute;
      background: $bgNoseCenter;
      top: 20px;
      left: 20px;
      border-radius: 100%;
      z-index: 2;
      animation: noseAnimate 2s infinite;
    }
  }

}
  
.lines {
  position: relative;
  
  &::before {
    @include size(20px, 20px);
    content: '';
    position: absolute;
    top: 57px;
    left: 35px;
    border: solid 3px $black;
    border-color: transparent $black transparent transparent;
    border-radius: 30% 0 100px; 
    z-index: 2;
    animation: noseAnimateAfter 2s infinite;
  }
  
  &::after {
    @include size(20px, 20px);
    content: '';
    position: absolute;
    top: 57px;
    right: 35px;
    border: solid 3px $black;
    border-color: transparent $black transparent transparent;
    border-radius: 30% 0 100px; 
    transform: rotate(90deg);
    z-index: 2;
    animation: noseAnimateAfter 2s infinite;
  }  
}

.message {
  font-family: 'Lobster', cursive;
  text-align: right;
  position: fixed;
  bottom: 10px;
  right: 100px;
  width: 100%;
  font-size: 40px;
  line-height: 40px;
  transform: rotate(-15deg);
  color: $bgBear;
  text-shadow: -2px 2px 0px rgba(#fff, .60);
  
  &--clicked {
    opacity: 0;
  }
}
View Compiled
var $holder = $('.holder'),
    $msg =  $('.message');

$holder.on('click', function(){
  $(this).toggleClass('holder--rotate');  
  
  if($holder.hasClass('holder--rotate')) {
    $msg.addClass('message--clicked');
  } else {
    $msg.removeClass('message--clicked');
  }
}); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js